/* 20260723 ui polish: sidebar toggle opacity, dark medicine cards, equal PO actions, restock results dark, no outer focus boxes. */

/* 1) Sidebar hide/unhide toggle cover: match Master Data opacity/feel in dark mode */
body.theme-dark .header-pharmacy-toggle,
body.theme-dark #sidebarToggle.header-pharmacy-toggle {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(236, 72, 153, 0.10)) !important;
  border-color: rgba(96, 165, 250, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 22px rgba(0, 0, 0, 0.12) !important;
  color: #e8f1ff !important;
}

/* 20260724 account settings showcase: preserve the existing panel logic while
   presenting the settings entry point as the supplied dark-glass menu. */
body.dashboard-page .profile-modern-layout {
  width: min(100%, 980px) !important;
  margin: 0 auto !important;
  gap: 18px !important;
}

body.dashboard-page .profile-modern-layout .profile-overview-card {
  position: relative !important;
  isolation: isolate;
  display: grid !important;
  justify-items: center !important;
  gap: 14px !important;
  padding: 30px 26px 26px !important;
  overflow: hidden !important;
  border: 1px solid rgba(148, 179, 230, 0.55) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(59, 130, 246, 0.10), transparent 32%),
    radial-gradient(circle at 92% 100%, rgba(214, 39, 205, 0.07), transparent 36%),
    linear-gradient(150deg, #ffffff 0%, #f4f7fd 55%, #eef3fb 100%) !important;
  box-shadow: 0 18px 40px rgba(15, 41, 92, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  text-align: center !important;
}

body.theme-dark .profile-modern-layout .profile-overview-card {
  border-color: rgba(92, 132, 214, 0.5) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(51, 98, 205, 0.16), transparent 32%),
    radial-gradient(circle at 92% 100%, rgba(214, 39, 205, 0.12), transparent 36%),
    linear-gradient(150deg, #07142e 0%, #080f25 48%, #0a1028 100%) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(180, 211, 255, 0.08) !important;
}

body.dashboard-page .profile-overview-card::before {
  display: none !important;
}

.profile-identity-glow {
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 200px;
  background: radial-gradient(circle, rgba(59, 142, 255, 0.10), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

body.theme-dark .profile-identity-glow {
  background: radial-gradient(circle, rgba(59, 142, 255, 0.22), transparent 68%);
}


body.dashboard-page .profile-overview-card > * {
  position: relative;
  z-index: 1;
}

body.dashboard-page .profile-avatar-large {
  width: 108px !important;
  height: 108px !important;
  margin: 0 auto !important;
  border: 3px solid rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.10), 0 14px 30px rgba(15, 41, 92, 0.18) !important;
  background: linear-gradient(135deg, #2563eb, #8b5cf6) !important;
}

body.theme-dark .profile-avatar-large {
  border-color: rgba(96, 175, 255, 0.55) !important;
  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.12), 0 18px 40px rgba(0, 0, 0, 0.4) !important;
  background: linear-gradient(135deg, #1f6fe0, #7c3aed) !important;
}

body.dashboard-page .profile-overview-card h2 {
  margin: 4px 0 0 !important;
  color: #10203f !important;
  font-size: 1.14rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

body.theme-dark .profile-overview-card h2 {
  color: #f4f7ff !important;
}

body.dashboard-page .profile-overview-card > p {
  margin: 0 !important;
  padding: 3px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(59, 130, 246, 0.32) !important;
  background: rgba(59, 130, 246, 0.10) !important;
  color: #1d4ed8 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

body.theme-dark .profile-overview-card > p {
  border-color: rgba(59, 142, 255, 0.4) !important;
  background: rgba(59, 130, 246, 0.14) !important;
  color: #8cc6ff !important;
}

body.dashboard-page .profile-overview-card .profile-photo-picker {
  width: 100% !important;
  max-width: 320px !important;
  margin: 6px 0 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(59, 130, 246, 0.22) !important;
  border-radius: 14px !important;
  background: linear-gradient(105deg, rgba(59, 130, 246, 0.06), rgba(139, 92, 246, 0.05)) !important;
  color: #2a3b5c !important;
}

body.theme-dark .profile-overview-card .profile-photo-picker {
  border-color: rgba(96, 133, 203, 0.32) !important;
  background: linear-gradient(105deg, rgba(18, 35, 73, 0.7), rgba(10, 23, 53, 0.58)) !important;
  color: #cddcf5 !important;
}

body.dashboard-page .profile-overview-card .profile-photo-picker-action {
  background: linear-gradient(120deg, #237aff, #a638e0) !important;
  box-shadow: 0 10px 22px rgba(77, 52, 226, 0.22) !important;
}

body.dashboard-page .profile-overview-card .profile-photo-picker small {
  color: #5c6f94 !important;
}

body.theme-dark .profile-overview-card .profile-photo-picker small {
  color: #9db3d9 !important;
}

body.dashboard-page .profile-remove-photo {
  color: #e11d5e !important;
}

body.theme-dark .profile-remove-photo {
  color: #ff8fa8 !important;
}


.profile-identity-list {
  width: 100% !important;
  max-width: 380px !important;
  margin: 6px 0 0 !important;
  display: grid !important;
  gap: 10px !important;
}

.profile-identity-row {
  --identity-accent: #278cff;
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 9px 14px;
  border: 1px solid rgba(139, 162, 199, 0.45);
  border-radius: 12px;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.95));
  text-align: left;
  box-shadow: 0 2px 8px rgba(15, 41, 92, 0.06);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.profile-identity-row:hover {
  transform: translateY(-1px);
  border-color: var(--identity-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--identity-accent) 42%, transparent), 0 8px 18px rgba(15, 41, 92, 0.12);
}

body.theme-dark .profile-identity-row {
  border-color: rgba(96, 133, 203, 0.28);
  background: linear-gradient(105deg, rgba(18, 35, 73, 0.68), rgba(10, 23, 53, 0.56));
  box-shadow: inset 0 1px 0 rgba(182, 211, 255, 0.04);
}

body.theme-dark .profile-identity-row:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--identity-accent) 42%, transparent), 0 10px 22px rgba(0, 0, 0, 0.22);
}

.profile-identity-row.is-blue { --identity-accent: #278cff; }
.profile-identity-row.is-purple { --identity-accent: #a658ff; }
.profile-identity-row.is-green { --identity-accent: #20dca2; }
.profile-identity-row.is-orange { --identity-accent: #ff8d43; }

.profile-identity-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--identity-accent) 70%, transparent);
  background: color-mix(in srgb, var(--identity-accent) 16%, rgba(8, 23, 55, 0.82));
  color: var(--identity-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--identity-accent) 30%, transparent);
}

.profile-identity-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.profile-identity-row dt {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: #6b7ba3 !important;
  font-size: 0.64rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.profile-identity-row dd {
  grid-column: 2;
  grid-row: 2;
  margin: 2px 0 0 !important;
  color: #10203f !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  overflow-wrap: anywhere;
}

body.theme-dark .profile-identity-row dt {
  color: #94a9d4 !important;
}

body.theme-dark .profile-identity-row dd {
  color: #f1f5ff !important;
}


@media (prefers-reduced-motion: reduce) {
  .profile-identity-row { transition: none; }
}

@media (max-width: 620px) {
  body.dashboard-page .profile-overview-card {
    padding: 24px 18px 20px !important;
  }

  body.dashboard-page .profile-avatar-large {
    width: 88px !important;
    height: 88px !important;
  }

  .profile-identity-row {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 50px;
    padding: 8px 12px;
  }

  .profile-identity-icon {
    width: 34px;
    height: 34px;
  }

  .profile-identity-icon svg {
    width: 17px;
    height: 17px;
  }
}

body.dashboard-page .profile-settings-card {

  position: relative !important;
  isolation: isolate;
  display: grid !important;
  gap: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid rgba(148, 179, 230, 0.55) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(59, 130, 246, 0.08), transparent 26%),
    radial-gradient(circle at 2% 100%, rgba(139, 92, 246, 0.06), transparent 35%),
    linear-gradient(145deg, #ffffff 0%, #f4f7fd 55%, #eef3fb 100%) !important;
  box-shadow: 0 18px 40px rgba(15, 41, 92, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

body.theme-dark .profile-settings-card {
  border-color: rgba(92, 132, 214, 0.52) !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(51, 98, 205, 0.13), transparent 26%),
    radial-gradient(circle at 2% 100%, rgba(55, 32, 150, 0.12), transparent 35%),
    linear-gradient(145deg, #07142e 0%, #080f25 48%, #0a1028 100%) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(180, 211, 255, 0.08) !important;
}


.settings-showcase-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100px;
  padding: 20px 34px 16px;
  overflow: hidden;
}

.settings-showcase-head::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.35), rgba(168, 85, 247, 0.28), transparent);
}

body.theme-dark .settings-showcase-head::after {
  background: linear-gradient(90deg, transparent, rgba(54, 117, 240, 0.7), rgba(218, 39, 205, 0.58), transparent);
}

.settings-showcase-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.settings-showcase-title h2 {
  margin: 0 0 4px !important;
  color: #10203f !important;
  font-size: clamp(1.06rem, 2vw, 1.28rem) !important;
  letter-spacing: -0.02em;
}

body.theme-dark .settings-showcase-title h2 {
  color: #f4f7ff !important;
}

.settings-showcase-title p {
  margin: 0 !important;
  color: #4a5b7f !important;
  font-size: 0.78rem !important;
  line-height: 1.45;
}

body.theme-dark .settings-showcase-title p {
  color: #a8b9da !important;
}


.settings-showcase-icon,
.settings-menu-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(59, 142, 255, 0.78);
  background: linear-gradient(145deg, rgba(25, 106, 255, 0.48), rgba(18, 57, 141, 0.42));
  box-shadow: 0 0 18px rgba(25, 106, 255, 0.38), inset 0 0 18px rgba(101, 183, 255, 0.12);
}

.settings-showcase-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.settings-showcase-icon svg,
.settings-menu-icon svg,
.settings-menu-arrow svg,
.settings-showcase-save svg,
.settings-art-user svg,
.settings-art-shield svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.settings-showcase-icon svg {
  color: #55a9ff;
  filter: drop-shadow(0 0 5px rgba(48, 142, 255, 0.8));
}

.settings-showcase-art {
  position: relative;
  width: 220px;
  height: 76px;
  margin: -2px -8px -2px 24px;
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.14), rgba(139, 92, 246, 0.10));
  box-shadow: 0 8px 20px rgba(15, 41, 92, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: perspective(360px) rotateY(-7deg);
}

body.theme-dark .settings-showcase-art {
  border-color: rgba(101, 151, 238, 0.48);
  background: linear-gradient(145deg, rgba(43, 87, 166, 0.62), rgba(13, 27, 66, 0.88));
  box-shadow: 0 0 24px rgba(50, 110, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}


.settings-showcase-art::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(126, 196, 255, 0.16), transparent 38%);
  pointer-events: none;
}

.settings-art-user {
  position: absolute;
  left: 20px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #dceaff;
  background: radial-gradient(circle at 40% 25%, #dceaff 0 22%, #8da4cc 23% 42%, transparent 43%);
}

.settings-art-user svg { width: 42px; height: 42px; opacity: 0.88; }

.settings-art-lines {
  position: absolute;
  top: 19px;
  left: 82px;
  display: grid;
  gap: 8px;
}

.settings-art-lines i {
  display: block;
  width: 62px;
  height: 6px;
  border-radius: 99px;
  background: rgba(164, 193, 239, 0.54);
}

.settings-art-lines i:nth-child(2) { width: 42px; }
.settings-art-lines i:nth-child(3) { width: 51px; }

.settings-art-shield {
  position: absolute;
  right: 17px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 48px;
  color: #53a7ff;
  filter: drop-shadow(0 0 8px rgba(24, 128, 255, 0.9));
}

.settings-art-shield svg { width: 42px; height: 48px; fill: rgba(17, 103, 230, 0.66); }

body.dashboard-page .profile-settings-card .profile-tabs {
  display: grid !important;
  gap: 10px !important;
  padding: 14px 20px 12px !important;
  background: transparent !important;
}

body.dashboard-page .profile-settings-card .profile-tab.settings-menu-card[hidden],
body.theme-dark.dashboard-page .profile-settings-card .profile-tab.settings-menu-card[hidden],
body.dashboard-page .profile-settings-card .profile-panel[hidden] {
  display: none !important;
}

body.dashboard-page .profile-settings-card .profile-tab.settings-menu-card {
  position: relative;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 14px;
  min-height: 64px !important;
  padding: 9px 16px !important;
  border: 1px solid rgba(139, 162, 199, 0.4) !important;
  border-radius: 12px !important;
  color: #10203f !important;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.92)) !important;
  text-align: left !important;
  box-shadow: 0 2px 8px rgba(15, 41, 92, 0.06) !important;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body.theme-dark .profile-settings-card .profile-tab.settings-menu-card {
  border-color: rgba(96, 133, 203, 0.3) !important;
  color: #eaf1ff !important;
  background: linear-gradient(105deg, rgba(18, 35, 73, 0.74), rgba(10, 23, 53, 0.62)) !important;
  box-shadow: inset 0 1px 0 rgba(182, 211, 255, 0.04), 0 8px 18px rgba(0, 0, 0, 0.16) !important;
}


body.dashboard-page .profile-settings-card .profile-tab.settings-menu-card::after { display: none !important; }

body.dashboard-page .profile-settings-card .profile-tab.settings-menu-card:hover,
body.dashboard-page .profile-settings-card .profile-tab.settings-menu-card:focus-visible {
  transform: translateY(-1px);
  border-color: var(--settings-accent) !important;
  outline: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--settings-accent) 46%, transparent), 0 10px 24px rgba(0, 0, 0, 0.25) !important;
}

body.dashboard-page .profile-settings-card .profile-tab.settings-menu-card.is-active {
  color: #f4f8ff !important;
  border-color: var(--settings-accent) !important;
  background: linear-gradient(105deg, color-mix(in srgb, var(--settings-accent) 13%, rgba(16, 31, 68, 0.88)), rgba(32, 15, 61, 0.68)) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--settings-accent) 20%, transparent), inset 0 0 24px color-mix(in srgb, var(--settings-accent) 7%, transparent) !important;
}

.settings-menu-card-blue { --settings-accent: #278cff; }
.settings-menu-card-green { --settings-accent: #20dca2; }
.settings-menu-card-orange { --settings-accent: #ff8d43; }
.settings-menu-card-purple { --settings-accent: #a658ff; }

.settings-menu-card .settings-menu-icon {
  width: 42px;
  height: 42px;
  border-color: color-mix(in srgb, var(--settings-accent) 70%, transparent);
  color: var(--settings-accent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--settings-accent) 15%, rgba(8, 23, 55, 0.82));
  box-shadow: 0 0 15px color-mix(in srgb, var(--settings-accent) 32%, transparent), inset 0 0 13px color-mix(in srgb, var(--settings-accent) 10%, transparent);
}

.settings-menu-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.settings-menu-copy strong {
  color: #10203f !important;
  font-size: 0.89rem;
  line-height: 1.2;
}

body.theme-dark .settings-menu-copy strong {
  color: #f1f5ff !important;
}

.settings-menu-copy small {
  overflow: hidden;
  color: #5a6d94 !important;
  font-size: 0.7rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.theme-dark .settings-menu-copy small {
  color: #b3c2df !important;
}


.settings-menu-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  justify-self: end;
  border: 1px solid color-mix(in srgb, var(--settings-accent) 76%, transparent);
  border-radius: 50%;
  color: #e9f2ff;
  box-shadow: 0 0 12px color-mix(in srgb, var(--settings-accent) 33%, transparent);
}

.settings-menu-arrow svg { width: 19px; height: 19px; stroke-width: 1.8; }

body.dashboard-page .profile-settings-card .profile-status {
  min-height: 18px;
  padding: 0 22px !important;
  color: #5c6f94 !important;
  font-size: 0.72rem;
}

body.theme-dark .profile-settings-card .profile-status {
  color: #a9bddd !important;
}


.settings-showcase-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: calc(100% - 32px);
  min-height: 48px;
  margin: 4px auto 18px;
  padding: 0 20px;
  border: 1px solid rgba(119, 190, 255, 0.5);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(105deg, #237aff 0%, #2859e8 43%, #d628c6 100%);
  box-shadow: 0 10px 28px rgba(77, 52, 226, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.settings-showcase-save:hover,
.settings-showcase-save:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
  outline: none;
  box-shadow: 0 12px 34px rgba(77, 52, 226, 0.48), 0 0 0 2px rgba(93, 173, 255, 0.22);
}

.settings-showcase-save svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .profile-settings-card .profile-tab.settings-menu-card,
  .settings-showcase-save { transition: none; }
}

@media (max-width: 620px) {
  .settings-showcase-head { min-height: 88px; padding: 17px 16px 13px; }
  .settings-showcase-title { gap: 11px; }
  .settings-showcase-icon { width: 42px; height: 42px; }
  .settings-showcase-title p { font-size: 0.68rem !important; }
  .settings-showcase-art { width: 112px; height: 56px; margin-right: -22px; opacity: 0.72; transform: scale(0.78) perspective(360px) rotateY(-7deg); transform-origin: right center; }
  .profile-settings-card .profile-tabs { padding: 12px 10px 10px !important; gap: 8px !important; }
  .profile-settings-card .profile-tab.settings-menu-card { grid-template-columns: 42px minmax(0, 1fr) 38px; gap: 10px; min-height: 62px !important; padding: 8px 10px !important; }
  .settings-menu-card .settings-menu-icon { width: 38px; height: 38px; }
  .settings-menu-copy small { white-space: normal; font-size: 0.65rem; }
  .settings-menu-arrow { width: 34px; height: 34px; }
  .settings-showcase-save { width: fit-content; max-width: calc(100% - 32px); margin-bottom: 16px; }
}

body.theme-dark .header-pharmacy-toggle:hover,
body.theme-dark .header-pharmacy-toggle:focus-visible,
body.theme-dark #sidebarToggle.header-pharmacy-toggle:hover,
body.theme-dark #sidebarToggle.header-pharmacy-toggle:focus-visible {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(236, 72, 153, 0.16)) !important;
  border-color: rgba(147, 197, 253, 0.32) !important;
  outline: none !important;
}

body.theme-dark .header-pharmacy-copy strong {
  color: #eef5ff !important;
}

body.theme-dark .header-pharmacy-copy small {
  color: #9db4d6 !important;
}

body.theme-dark .header-pharmacy-toggle img {
  background: rgba(15, 23, 42, 0.72) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

/* Also soften mobile/desktop sidebar scrim so open-sidebar overlay is not heavy */
.sidebar-scrim {
  background: rgba(8, 25, 58, 0.10) !important;
  backdrop-filter: blur(2px) !important;
}

body.theme-dark .sidebar-scrim {
  background: rgba(2, 8, 20, 0.16) !important;
  backdrop-filter: blur(2px) !important;
}

/* 2) Cari Data Obat cards: dark surface, keep colorful name accents */
body.theme-dark .quick-medicine-card,
body.theme-dark #view-cari-data-obat .quick-medicine-card,
body.theme-dark #view-cari-data-obat.is-active .quick-medicine-card {
  background: linear-gradient(165deg, rgba(14, 28, 52, 0.98), rgba(10, 20, 40, 0.96)) !important;
  border: 1px solid rgba(96, 130, 180, 0.28) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28) !important;
  color: #e8f1ff !important;
}

body.theme-dark .quick-medicine-card .quick-medicine-list,
body.theme-dark .quick-medicine-card .quick-medicine-list dt,
body.theme-dark .quick-medicine-card .quick-medicine-list dd,
body.theme-dark #view-cari-data-obat .quick-medicine-list dt,
body.theme-dark #view-cari-data-obat .quick-medicine-list dd {
  color: #c5d6f0 !important;
  background: transparent !important;
}

body.theme-dark .quick-medicine-name,
body.theme-dark .quick-medicine-name strong,
body.theme-dark #view-cari-data-obat .quick-medicine-name,
body.theme-dark #view-cari-data-obat .quick-medicine-name strong,
body.theme-dark #view-cari-data-obat.is-active .quick-medicine-name,
body.theme-dark #view-cari-data-obat.is-active .quick-medicine-name strong {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(59, 130, 246, 0.10)) !important;
  border-color: rgba(96, 165, 250, 0.42) !important;
  color: #eef5ff !important;
}

body.theme-dark .quick-medicine-name small,
body.theme-dark #view-cari-data-obat .quick-medicine-name small {
  color: #9db4d6 !important;
}

/* Keep colorful name-row accents per card tone */
body.theme-dark #view-cari-data-obat.is-active .quick-tone-2 .quick-medicine-name,
body.theme-dark #view-cari-data-obat.is-active .quick-medicine-card:nth-child(4n+2) .quick-medicine-name {
  background: linear-gradient(135deg, rgba(255, 120, 70, 0.16), rgba(255, 157, 87, 0.08)) !important;
  border-color: rgba(255, 185, 143, 0.55) !important;
}

body.theme-dark #view-cari-data-obat.is-active .quick-tone-3 .quick-medicine-name,
body.theme-dark #view-cari-data-obat.is-active .quick-medicine-card:nth-child(4n+3) .quick-medicine-name {
  background: linear-gradient(135deg, rgba(27, 191, 193, 0.16), rgba(41, 208, 187, 0.08)) !important;
  border-color: rgba(130, 224, 229, 0.55) !important;
}

body.theme-dark #view-cari-data-obat.is-active .quick-tone-4 .quick-medicine-name,
body.theme-dark #view-cari-data-obat.is-active .quick-medicine-card:nth-child(4n+4) .quick-medicine-name {
  background: linear-gradient(135deg, rgba(123, 73, 255, 0.16), rgba(182, 77, 244, 0.08)) !important;
  border-color: rgba(183, 169, 255, 0.55) !important;
}

body.theme-dark #view-cari-data-obat.is-active .quick-name-accent {
  opacity: 1 !important;
}

/* 3) Equal-size Edit / Tandai Diproses / Terima Barang action columns */
.purchase-detail-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
}

.purchase-detail-actions > .purchase-action-button,
.purchase-detail-actions > #poEditSelectedButton,
.purchase-detail-actions > #poMarkProcessButton,
.purchase-detail-actions > #poReceiveButton {
  flex: 1 1 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 48px !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Keep red cancel / print row full-width friendly if present after the three primary actions */
.purchase-detail-actions > .purchase-action-button.is-red,
.purchase-detail-actions > #poCancelButton,
.purchase-detail-actions > #poPrintButton {
  grid-column: auto;
}

@media (max-width: 560px) {
  .purchase-detail-actions {
    grid-template-columns: 1fr !important;
  }
}

/* 4) Restok search result cards dark mode */
body.theme-dark .restock-medicine-results,
body.theme-dark #view-restok-obat .restock-medicine-results {
  background: linear-gradient(165deg, rgba(12, 24, 46, 0.98), rgba(8, 16, 32, 0.98)) !important;
  border-color: rgba(96, 130, 180, 0.34) !important;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.42) !important;
  color: #e8f1ff !important;
}

body.theme-dark .restock-medicine-result,
body.theme-dark #view-restok-obat .restock-medicine-result {
  background: linear-gradient(150deg, rgba(18, 34, 62, 0.98), rgba(12, 24, 46, 0.96)) !important;
  border-color: rgba(96, 130, 180, 0.28) !important;
  color: #eef5ff !important;
}

body.theme-dark .restock-medicine-result:hover,
body.theme-dark .restock-medicine-result:focus,
body.theme-dark .restock-medicine-result:focus-visible {
  background: linear-gradient(150deg, rgba(30, 54, 96, 0.98), rgba(20, 38, 70, 0.98)) !important;
  border-color: rgba(104, 168, 255, 0.48) !important;
  outline: none !important;
}

body.theme-dark .restock-medicine-result strong,
body.theme-dark .restock-medicine-empty strong {
  color: #f3f8ff !important;
}

body.theme-dark .restock-medicine-result small,
body.theme-dark .restock-medicine-empty small {
  color: #9db4d6 !important;
}

body.theme-dark .restock-medicine-result em {
  color: #9fcbff !important;
}

body.theme-dark .restock-medicine-empty {
  background: rgba(18, 34, 62, 0.9) !important;
  color: #c5d6f0 !important;
}

/* 5) Remove outer rectangular focus boxes on all inputs/search; keep in-field border cue only */
body.dashboard-page input:focus,
body.dashboard-page select:focus,
body.dashboard-page textarea:focus,
body.dashboard-page input:focus-visible,
body.dashboard-page select:focus-visible,
body.dashboard-page textarea:focus-visible,
body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus,
body.theme-dark input:focus-visible,
body.theme-dark select:focus-visible,
body.theme-dark textarea:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

body.dashboard-page .dashboard-search:focus-within,
body.dashboard-page .restock-medicine-search:focus-within,
body.dashboard-page .restock-search:focus-within,
body.dashboard-page .purchase-search:focus-within,
body.dashboard-page .search-box:focus-within,
body.theme-dark .dashboard-search:focus-within,
body.theme-dark .restock-medicine-search:focus-within,
body.theme-dark .restock-search:focus-within,
body.theme-dark .purchase-search:focus-within,
body.theme-dark .search-box:focus-within,
#view-cari-data-obat.is-active .quick-search-toolbar .dashboard-search:focus-within {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border-color: rgba(59, 130, 246, 0.55) !important;
}

body.theme-dark .dashboard-search:focus-within,
body.theme-dark .restock-medicine-search:focus-within,
body.theme-dark .restock-search:focus-within,
body.theme-dark .purchase-search:focus-within,
body.theme-dark .search-box:focus-within,
body.theme-dark #view-cari-data-obat.is-active .quick-search-toolbar .dashboard-search:focus-within {
  border-color: rgba(104, 168, 255, 0.62) !important;
  box-shadow: inset 0 0 0 1px rgba(104, 168, 255, 0.22) !important;
}

body.dashboard-page .dashboard-search input:focus,
body.dashboard-page .restock-medicine-search input:focus,
body.dashboard-page .restock-search input:focus,
body.dashboard-page .purchase-search input:focus,
body.theme-dark .dashboard-search input:focus,
body.theme-dark .restock-medicine-search input:focus,
body.theme-dark .restock-search input:focus,
body.theme-dark .purchase-search input:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* 20260723b ui polish: search box text white in dark mode, restock draft panel dark, unify save buttons, sidebar link padding/radius. */

/* 6) Cari Data Obat: typed text stays white in dark mode (same tone as medicine cards) */
body.theme-dark #view-cari-data-obat.is-active .quick-search-toolbar .dashboard-search input,
body.theme-dark .quick-search-toolbar .dashboard-search input,
body.theme-dark .dashboard-search input {
  color: #eef5ff !important;
}

body.theme-dark #view-cari-data-obat.is-active .quick-search-toolbar .dashboard-search input::placeholder,
body.theme-dark .dashboard-search input::placeholder {
  color: #9db4d6 !important;
}

/* 7) Restok Obat draft panel/table: full dark surface (was still light/white). */
body.theme-dark .restock-draft-panel {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow) !important;
}

body.theme-dark .restock-list-head p,
body.theme-dark .restock-draft-head p {
  color: var(--muted) !important;
}

body.theme-dark .restock-draft-footer {
  color: var(--muted) !important;
}

body.theme-dark .restock-draft-footer strong,
body.theme-dark #restockDraftTotalItem,
body.theme-dark #restockDraftSummary {
  color: var(--ink) !important;
}

body.theme-dark .restock-draft-footer output {
  background: var(--surface-soft) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

body.theme-dark .restock-cancel-button {
  background: rgba(255, 37, 84, 0.14) !important;
  border-color: rgba(255, 99, 132, 0.4) !important;
  color: #ff8fa3 !important;
}

body.theme-dark .purchase-soft-button,
body.theme-dark .purchase-reset-button,
body.theme-dark .purchase-back-button,
body.theme-dark .purchase-detail-close {
  background: var(--surface-soft) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

/* 8) Unify all Simpan/Save buttons to the same blue-magenta gradient used by "Pilih Foto".
   Hapus/Delete buttons intentionally stay red/pink (destructive-action convention) — not touched here. */
button.secondary-action[type="submit"],
.profile-overview-save,
.role-editor-save,
#poSaveDraftButton,
#restockSaveDraftButton,
#poSaveOrderButton,
#poSummaryConfirmButton,
#restockSubmitDraftButton,
.restock-primary-button,
.purchase-primary-button {
  border: 0 !important;
  border-color: transparent !important;
  background: linear-gradient(120deg, #2769ff, #c827cf) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(92, 66, 222, 0.2) !important;
}

button.secondary-action[type="submit"]:hover,
.profile-overview-save:hover,
.role-editor-save:hover,
#poSaveDraftButton:hover,
#restockSaveDraftButton:hover,
#poSaveOrderButton:hover,
#poSummaryConfirmButton:hover,
#restockSubmitDraftButton:hover,
.restock-primary-button:hover,
.purchase-primary-button:hover {
  filter: brightness(1.06);
}

body.theme-dark button.secondary-action[type="submit"],
body.theme-dark .profile-overview-save,
body.theme-dark .role-editor-save,
body.theme-dark #poSaveDraftButton,
body.theme-dark #restockSaveDraftButton,
body.theme-dark #poSaveOrderButton,
body.theme-dark #poSummaryConfirmButton,
body.theme-dark #restockSubmitDraftButton,
body.theme-dark .restock-primary-button,
body.theme-dark .purchase-primary-button {
  background: linear-gradient(120deg, #2769ff, #c827cf) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* 9) Sidebar link: shrink vertical padding to hug icon size (~34px) and match the
   Master Data / Sistem section-toggle corner radius (14px). */
  .app-sidebar .sidebar-link,
  body.sidebar-collapsed .app-sidebar .sidebar-link {
    padding: 5px !important;
    border-radius: 14px !important;
  }

/* 20260724 DARK MODE FIXES: 7 masalah kontras + baca-tulis */

/* 1) Tabel daftar obat restok: background gelap + font putih di dark mode */
body.theme-dark .restock-list {
  background: var(--surface) !important;
}

body.theme-dark .restock-table th,
body.theme-dark .restock-table td {
  background: var(--surface) !important;
  color: var(--ink) !important;
}

body.theme-dark .restock-table th {
  background: var(--surface-soft) !important;
  color: var(--muted) !important;
}

body.theme-dark .restock-table td strong,
body.theme-dark .restock-table td {
  color: var(--ink) !important;
}

body.theme-dark .restock-table td small {
  color: var(--muted) !important;
}

body.theme-dark .restock-table-row:hover td {
  background: rgba(22, 42, 80, 0.5) !important;
}

/* 2) Notifikasi: nomor & tombol terbaca di dark mode */
body.theme-dark .notification-number {
  color: var(--ink) !important;
  background: transparent !important;
}

body.theme-dark .notification-item {
  background: var(--surface-soft) !important;
  border-color: var(--line) !important;
}

body.theme-dark .notification-toolbar button {
  background: rgba(255, 71, 126, 0.16) !important;
  color: #ff8fa3 !important;
  border-color: rgba(255, 99, 132, 0.3) !important;
}

body.theme-dark .notification-toolbar button:hover {
  background: rgba(255, 71, 126, 0.28) !important;
}

body.theme-dark .notification-delete {
  background: rgba(255, 71, 126, 0.16) !important;
  color: #ff8fa3 !important;
}

body.theme-dark .notification-delete:hover {
  background: rgba(255, 71, 126, 0.28) !important;
}

/* 3) Halaman pengingat integritas: background gelap penuh */
body.theme-dark .text-reminder-card {
  background: var(--surface) !important;
  border-color: rgba(81, 106, 163, 0.4) !important;
}

body.theme-dark .integrity-values article {
  background: var(--surface-soft) !important;
  border-color: rgba(81, 106, 163, 0.3) !important;
}

body.theme-dark .reminder-note {
  background: var(--surface-soft) !important;
  border-color: rgba(81, 106, 163, 0.3) !important;
  color: #cfddf5 !important;
}

body.theme-dark .text-reminder-close {
  background: var(--surface-soft) !important;
  border-color: rgba(97, 124, 184, 0.4) !important;
  color: #7f9cff !important;
}

/* 4) Info shift/absensi: padding & opacity wajar di dark mode */
body.theme-dark .attendance-choice-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

body.theme-dark .attendance-choice-status {
  background: var(--surface-soft) !important;
  border-color: rgba(81, 106, 163, 0.3) !important;
  color: #cfddf5 !important;
}

/* 5) Kartu dashboard: lebar kolom normal (tidak diperbesar) */
/* (No changes needed - this was layout issue, handled by existing CSS) */

/* 6) Tabel tambah obat data obat: background gelap + font terbaca */
body.theme-dark #medicineForm .medicine-section {
  background: var(--surface-soft) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

body.theme-dark #medicineForm .medicine-section legend {
  color: var(--ink) !important;
}

body.theme-dark #medicineForm .medicine-field label,
body.theme-dark #medicineForm .medicine-field-label {
  color: var(--muted) !important;
}

body.theme-dark #medicineForm .medicine-field input,
body.theme-dark #medicineForm .medicine-field select,
body.theme-dark #medicineForm .medicine-field textarea {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

body.theme-dark #medicineForm .medicine-field input::placeholder,
body.theme-dark #medicineForm .medicine-field textarea::placeholder {
  color: #9db4d6 !important;
}

/* 7) Detail permintaan stok: background + font terbaca */
body.theme-dark .restock-detail-summary-modern,
body.theme-dark .restock-detail-grid-modern,
body.theme-dark .restock-detail-items-card,
body.theme-dark .restock-detail-note {
  background: var(--surface-soft) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

body.theme-dark .restock-detail-grid-modern dt {
  color: var(--muted) !important;
}

body.theme-dark .restock-detail-grid-modern dd {
  color: var(--ink) !important;
}

body.theme-dark .restock-detail-items-table th {
  background: var(--surface) !important;
  color: var(--muted) !important;
}

body.theme-dark .restock-detail-items-table td {
  background: var(--surface-soft) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

body.theme-dark .restock-detail-items-table td strong {
  color: var(--ink) !important;
}

body.theme-dark .restock-detail-items-table td small {
  color: var(--muted) !important;
}

/* ===== 20260724 final dark-mode pass ===== */

/* Cari Data Obat: keep the stable single-column card flow. */
@media (min-width: 821px) {
  #view-cari-data-obat.is-active .quick-search-workspace {
    width: min(760px, calc(100% - 32px)) !important;
  }

  #view-cari-data-obat.is-active #quickResultsList,
  #view-cari-data-obat.is-active .quick-results-list {
    display: flex !important;
    flex-direction: column !important;
    align-content: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #view-cari-data-obat.is-active .quick-medicine-card {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 820px) {
  #view-cari-data-obat.is-active #quickResultsList,
  #view-cari-data-obat.is-active .quick-results-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
}

/* Tambah Obat: remove the remaining light surfaces from every nested form part. */
body.theme-dark #medicineForm,
body.theme-dark #medicineForm .modal-head,
body.theme-dark #medicineForm .form-actions,
body.theme-dark #medicineForm .medicine-section,
body.theme-dark #medicineForm .medicine-info-panel,
body.theme-dark #medicineForm .medicine-sale-block,
body.theme-dark #medicineForm .medicine-check-row,
body.theme-dark #medicineForm .medicine-profit-row,
body.theme-dark #medicineForm .medicine-price-head,
body.theme-dark #medicineForm .medicine-auto-label,
body.theme-dark #medicineForm .medicine-stock-unit {
  background: #0f1d34 !important;
  color: #eef5ff !important;
  border-color: #2a4162 !important;
}

body.theme-dark #medicineForm .medicine-section {
  background: linear-gradient(155deg, #142641, #0e1b31) !important;
}

body.theme-dark #medicineForm .medicine-section legend,
body.theme-dark #medicineForm .medicine-section h4,
body.theme-dark #medicineForm .medicine-price-head,
body.theme-dark #medicineForm .medicine-price-head span,
body.theme-dark #medicineForm .medicine-field-label,
body.theme-dark #medicineForm .medicine-field > label {
  color: #dbeafe !important;
}

body.theme-dark #medicineForm .medicine-field input,
body.theme-dark #medicineForm .medicine-field select,
body.theme-dark #medicineForm .medicine-field textarea,
body.theme-dark #medicineForm .medicine-stock-unit,
body.theme-dark #medicineForm .medicine-control-wrap {
  background: #09172c !important;
  color: #f1f5ff !important;
  border-color: #355277 !important;
}

body.theme-dark #medicineForm .medicine-field input:focus,
body.theme-dark #medicineForm .medicine-field select:focus,
body.theme-dark #medicineForm .medicine-field textarea:focus {
  border-color: #6ea8ff !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.16) !important;
}

body.theme-dark #medicineForm .medicine-field input::placeholder,
body.theme-dark #medicineForm .medicine-field textarea::placeholder {
  color: #8fa7c9 !important;
}

body.theme-dark #medicineForm .medicine-tabs button,
body.theme-dark #medicineForm .medicine-info-tabs button {
  background: #162944 !important;
  color: #9fb6d8 !important;
  border-color: #2a4162 !important;
}

body.theme-dark #medicineForm .medicine-tabs button.is-active,
body.theme-dark #medicineForm .medicine-info-tabs button.is-active {
  background: linear-gradient(120deg, #1d4ed8, #7c3aed) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

body.theme-dark #medicineForm .medicine-section-icon,
body.theme-dark #medicineForm .medicine-auto-badge {
  background: rgba(96, 165, 250, 0.18) !important;
  color: #93c5fd !important;
  border-color: rgba(96, 165, 250, 0.42) !important;
}

body.theme-dark #medicineForm .medicine-price-head,
body.theme-dark #medicineForm .medicine-sale-block h4 {
  color: #f0abfc !important;
}

body.theme-dark #medicineForm .medicine-sale-delete,
body.theme-dark #medicineForm .medicine-remove-sale-row,
body.theme-dark #medicineForm .medicine-remove-unit {
  background: rgba(244, 63, 94, 0.16) !important;
  color: #fda4af !important;
  border-color: rgba(251, 113, 133, 0.42) !important;
}

body.theme-dark #medicineForm .form-actions button,
body.theme-dark #medicineForm .medicine-add-option,
body.theme-dark #medicineForm .medicine-add-sale-row,
body.theme-dark #medicineForm .medicine-add-unit {
  background: #1b3355 !important;
  color: #dbeafe !important;
  border-color: #41638d !important;
}

body.theme-dark #medicineForm .form-actions button[type="submit"] {
  background: linear-gradient(120deg, #2769ff, #c827cf) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* Notification detail action: a distinct view affordance, not another delete button. */
.notification-open-restock {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 0 12px 0 10px !important;
  border: 1px solid rgba(34, 211, 238, 0.72) !important;
  background: linear-gradient(135deg, #1264d8, #0891b2) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 16px rgba(8, 145, 178, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease !important;
}

.notification-open-restock svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 1.8 !important;
}

.notification-open-restock:hover,
.notification-open-restock:focus-visible {
  background: linear-gradient(135deg, #2178f3, #06b6d4) !important;
  color: #ffffff !important;
  box-shadow: 0 9px 20px rgba(6, 182, 212, 0.34), 0 0 0 3px rgba(34, 211, 238, 0.14) !important;
  filter: brightness(1.06) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

.notification-open-restock:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Close the remaining light table/control layers inside the add-medicine modal. */
body.theme-dark #medicineForm,
body.theme-dark #medicineForm * {
  scrollbar-color: #355277 #0b192e;
}

body.theme-dark #medicineForm .medicine-form-grid,
body.theme-dark #medicineForm .medicine-section-grid,
body.theme-dark #medicineForm .medicine-sale-grid,
body.theme-dark #medicineForm .medicine-sale-row,
body.theme-dark #medicineForm .medicine-info-panel,
body.theme-dark #medicineForm .medicine-control-wrap,
body.theme-dark #medicineForm .medicine-sale-unit-pair,
body.theme-dark #medicineForm .medicine-price-head {
  background: transparent !important;
  color: #eef5ff !important;
}

body.theme-dark #medicineForm .medicine-sale-price input,
body.theme-dark #medicineForm .medicine-sale-profit input,
body.theme-dark #medicineForm .medicine-sale-prescription input,
body.theme-dark #medicineForm .medicine-sale-conversion input,
body.theme-dark #medicineForm .medicine-sale-conversion-unit select {
  background: #0b192e !important;
  color: #f1f5ff !important;
  border-color: #355277 !important;
}

body.theme-dark #medicineForm .medicine-sale-note,
body.theme-dark #medicineForm .medicine-check-row label,
body.theme-dark #medicineForm .medicine-profit-row,
body.theme-dark #medicineForm .medicine-price-head span {
  color: #a9bddc !important;
}

/* 20260724 settings reference: two-column dark-glass composition. */
body.dashboard-page .profile-modern-layout {
  width: min(100%, 1480px) !important;
  grid-template-columns: minmax(0, 1fr) 380px !important;
  grid-template-areas: "settings summary" "settings tips" !important;
  align-items: start !important;
  gap: 18px !important;
  margin: 0 auto !important;
}

body.dashboard-page .profile-settings-card {
  grid-area: settings !important;
  min-width: 0 !important;
  border: 1px solid rgba(62, 132, 239, 0.85) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 78% 5%, rgba(23, 106, 227, 0.18), transparent 28%),
    linear-gradient(145deg, #071631 0%, #08152f 52%, #091027 100%) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(194, 220, 255, 0.08) !important;
  overflow: hidden !important;
}

body.dashboard-page .profile-modern-layout .account-summary-card {
  grid-area: summary !important;
  display: block !important;
  padding: 22px 24px 20px !important;
  border: 1px solid rgba(87, 142, 221, 0.52) !important;
  border-radius: 20px !important;
  background: linear-gradient(150deg, #0d2445 0%, #0a1a35 100%) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(196, 221, 255, 0.06) !important;
  text-align: left !important;
}

body.dashboard-page .profile-modern-layout .settings-tips-card {
  grid-area: tips !important;
  min-height: 236px !important;
  padding: 22px 24px !important;
  border-color: rgba(161, 84, 234, 0.52) !important;
  border-radius: 20px !important;
  background: linear-gradient(150deg, #111f42 0%, #0d1a35 100%) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(196, 221, 255, 0.05) !important;
}

.account-summary-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(113, 159, 227, 0.32) !important;
}

.account-summary-head h2 {
  margin: 0 !important;
  color: #f7faff !important;
  font-size: 1.02rem !important;
  letter-spacing: -0.02em !important;
}

.account-photo-menu-wrap { position: relative !important; }
.account-photo-menu-button {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #9bb9eb !important;
  cursor: pointer !important;
}
.account-photo-menu-button:hover,
.account-photo-menu-button:focus-visible { background: rgba(85, 151, 239, 0.16) !important; color: #fff !important; outline: none !important; }
.account-photo-menu-button svg { width: 18px; height: 18px; fill: currentColor; }
.account-photo-menu {
  position: absolute !important;
  z-index: 20 !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  display: grid !important;
  min-width: 150px !important;
  padding: 6px !important;
  border: 1px solid rgba(104, 155, 231, 0.5) !important;
  border-radius: 11px !important;
  background: #10284b !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.36) !important;
}
.account-photo-menu[hidden] { display: none !important; }
.account-photo-menu button {
  min-height: 34px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #e3edff !important;
  text-align: left !important;
  cursor: pointer !important;
}
.account-photo-menu button:hover,
.account-photo-menu button:focus-visible { background: rgba(71, 133, 226, 0.22) !important; outline: none !important; }

.account-summary-person { display: flex !important; align-items: center !important; gap: 15px !important; padding: 20px 0 18px !important; }
.account-summary-person .profile-avatar-large { flex: 0 0 auto !important; width: 72px !important; height: 72px !important; margin: 0 !important; }
.account-summary-person-copy { display: grid !important; gap: 4px !important; min-width: 0 !important; }
.account-summary-person-copy strong { color: #f7faff !important; font-size: 1.03rem !important; }
.account-summary-person-copy small { color: #c6d4ef !important; font-size: 0.8rem !important; }
.account-summary-person-copy em { display: inline-flex !important; align-items: center !important; gap: 6px !important; color: #23e985 !important; font-size: 0.72rem !important; font-style: normal !important; font-weight: 800 !important; }
.account-summary-person-copy em i { width: 7px; height: 7px; border-radius: 50%; background: #28ee8e; box-shadow: 0 0 9px rgba(40, 238, 142, 0.8); }

.account-summary-details { display: grid !important; gap: 0 !important; margin: 0 !important; }
.account-summary-details > div { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 14px !important; min-height: 38px !important; border-bottom: 1px solid rgba(113, 159, 227, 0.18) !important; }
.account-summary-details dt { display: inline-flex !important; align-items: center !important; gap: 9px !important; color: #cbd9f1 !important; font-size: 0.8rem !important; }
.account-summary-details dt svg { width: 17px; height: 17px; fill: none; stroke: #b7cbea; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.account-summary-details dd { margin: 0 !important; color: #e2eaff !important; font-size: 0.78rem !important; font-weight: 700 !important; text-align: right !important; overflow-wrap: anywhere !important; }
.account-summary-details dd.is-active-status { display: inline-flex !important; align-items: center !important; gap: 7px !important; color: #20ef82 !important; }
.account-summary-details dd.is-active-status svg { width: 17px; height: 17px; fill: #25eb82; stroke: #082344; stroke-width: 1.8; }

.profile-photo-compatibility { display: none !important; }
.settings-tips-card header { display: flex !important; align-items: center !important; gap: 8px !important; }
.settings-tips-card header h3 { color: #f8fbff !important; font-size: 1rem !important; }
.settings-tips-card ul { display: grid !important; gap: 14px !important; margin: 18px 0 0 !important; padding: 0 !important; list-style: none !important; }
.settings-tips-card li { display: flex !important; align-items: center !important; gap: 10px !important; color: #d1dcf2 !important; font-size: 0.78rem !important; }
.settings-tips-card li svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: #15ed7f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }

.settings-showcase-footer {
  display: grid;
  gap: 12px;
  padding: 16px 26px 20px;
  border-top: 1px solid rgba(113, 159, 227, 0.32);
}

.settings-showcase-actions {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 18px;
}

.settings-showcase-save,
.settings-showcase-cancel {
  min-height: 50px;
  border-radius: 12px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
}

.settings-showcase-save {
  width: min(390px, 62%);
  margin: 0;
}

.settings-showcase-cancel {
  width: min(176px, 28%);
  border: 1px solid rgba(74, 132, 220, 0.58);
  background: rgba(9, 25, 55, 0.54);
  color: #e5efff;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.settings-showcase-cancel:hover,
.settings-showcase-cancel:focus-visible {
  border-color: rgba(121, 178, 255, 0.9);
  background: rgba(37, 82, 153, 0.28);
  outline: none;
  transform: translateY(-1px);
}

.settings-safe-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0 !important;
  color: #a9c0e5 !important;
  font-size: 0.75rem !important;
  text-align: center;
}

.settings-safe-note svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: #41b9ff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.settings-showcase-footer .profile-status {
  margin: 0 !important;
  text-align: center;
}

.settings-tip-shield {
  position: absolute;
  right: 22px;
  bottom: 18px;
  width: 86px;
  height: 98px;
  color: rgba(40, 115, 224, 0.34);
  opacity: 0.72;
  pointer-events: none;
  transform: rotate(8deg);
}

.settings-tip-shield svg {
  width: 100%;
  height: 100%;
  fill: rgba(21, 87, 190, 0.22);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.9;
}

@media (max-width: 620px) {
  .settings-showcase-footer { padding: 14px 16px 18px; }
  .settings-showcase-actions { gap: 10px; }
  .settings-showcase-save { width: 62%; min-width: 0; }
  .settings-showcase-cancel { width: 38%; min-width: 0; }
  .settings-safe-note { font-size: 0.68rem !important; }
  .settings-tip-shield { right: 10px; bottom: 12px; width: 66px; height: 76px; opacity: 0.48; }
}

@media (prefers-reduced-motion: reduce) {
  .settings-showcase-cancel { transition: none; }
}

@media (max-width: 980px) {
  body.dashboard-page .profile-modern-layout { grid-template-columns: minmax(0, 1fr) 320px !important; }
}

@media (max-width: 760px) {
  body.dashboard-page .profile-modern-layout { grid-template-columns: 1fr !important; grid-template-areas: "settings" "summary" "tips" !important; }
  body.dashboard-page .profile-modern-layout .account-summary-card,
  body.dashboard-page .profile-modern-layout .settings-tips-card { min-width: 0 !important; }
  .settings-showcase-head { padding-inline: 20px !important; }
  .settings-showcase-art { display: none !important; }
}

/* 20260724 settings reference final: target composition with theme parity. */
body.dashboard-page #view-akun-profil {
  --settings-blue: #278cff;
  --settings-green: #20dca2;
  --settings-orange: #ff8d43;
  --settings-purple: #a658ff;
  min-width: 0;
}

body.dashboard-page .profile-modern-layout {
  width: min(100%, 1480px) !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) !important;
  grid-template-areas: "settings summary" "settings tips" !important;
  align-items: start !important;
  gap: 16px !important;
  margin: 0 auto !important;
}

body.dashboard-page .profile-settings-card,
body.dashboard-page .profile-modern-layout .account-summary-card,
body.dashboard-page .profile-modern-layout .settings-tips-card {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  border-radius: 20px !important;
  box-sizing: border-box;
}

body.dashboard-page .profile-settings-card {
  grid-area: settings !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(61, 131, 239, 0.68) !important;
  background:
    radial-gradient(circle at 78% 0%, rgba(75, 137, 255, 0.13), transparent 28%),
    radial-gradient(circle at 0% 100%, rgba(160, 72, 255, 0.08), transparent 30%),
    linear-gradient(145deg, #fafdff 0%, #f1f6ff 100%) !important;
  box-shadow: 0 18px 38px rgba(31, 73, 139, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body.theme-dark.dashboard-page .profile-settings-card {
  border-color: rgba(60, 141, 255, 0.9) !important;
  background:
    radial-gradient(circle at 78% 0%, rgba(22, 108, 236, 0.18), transparent 28%),
    radial-gradient(circle at 0% 100%, rgba(117, 39, 218, 0.12), transparent 32%),
    linear-gradient(145deg, #071631 0%, #08152f 52%, #091027 100%) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(194, 220, 255, 0.08) !important;
}

body.dashboard-page .profile-modern-layout .account-summary-card {
  grid-area: summary !important;
  display: block !important;
  min-width: 0 !important;
  padding: 22px 24px 20px !important;
  border: 1px solid rgba(66, 123, 211, 0.48) !important;
  background: linear-gradient(150deg, #ffffff 0%, #f1f6ff 100%) !important;
  box-shadow: 0 16px 34px rgba(31, 73, 139, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  text-align: left !important;
}

body.theme-dark.dashboard-page .profile-modern-layout .account-summary-card {
  border-color: rgba(87, 142, 221, 0.52) !important;
  background: linear-gradient(150deg, #0d2445 0%, #0a1a35 100%) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(196, 221, 255, 0.06) !important;
}

body.dashboard-page .profile-modern-layout .settings-tips-card {
  grid-area: tips !important;
  min-height: 236px !important;
  padding: 22px 24px !important;
  border: 1px solid rgba(139, 81, 211, 0.45) !important;
  background: #ffffff !important;
  box-shadow: 0 16px 34px rgba(70, 46, 135, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body.theme-dark.dashboard-page .profile-modern-layout .settings-tips-card {
  border-color: rgba(161, 84, 234, 0.52) !important;
  background: #111f42 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(196, 221, 255, 0.05) !important;
}

body.dashboard-page .settings-showcase-head {
  min-height: 108px;
  padding: 22px 36px 18px;
}

body.dashboard-page .settings-showcase-icon {
  border: 0 !important;
  background: linear-gradient(135deg, #237aff 0%, #2b66ee 45%, #d628c6 100%) !important;
  box-shadow: 0 14px 30px rgba(77, 52, 226, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

body.dashboard-page .settings-showcase-icon svg {
  color: #ffffff !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}

body.dashboard-page .settings-showcase-title { gap: 16px; }
body.dashboard-page .settings-showcase-title h2 {
  font-size: clamp(1.18rem, 2vw, 1.4rem) !important;
}
body.dashboard-page .settings-showcase-title p {
  max-width: 620px;
  font-size: 0.82rem !important;
}
body.dashboard-page .settings-showcase-icon { width: 56px; height: 56px; }
body.dashboard-page .settings-showcase-icon svg { width: 28px; height: 28px; }

body:not(.theme-dark).dashboard-page .settings-showcase-title h2,
body:not(.theme-dark).dashboard-page .settings-menu-copy strong { color: #14264c !important; }
body:not(.theme-dark).dashboard-page .settings-showcase-title p,
body:not(.theme-dark).dashboard-page .settings-menu-copy small { color: #617293 !important; }

body.theme-dark.dashboard-page .settings-showcase-title h2,
body.theme-dark.dashboard-page .settings-menu-copy strong { color: #f4f7ff !important; }
body.theme-dark.dashboard-page .settings-showcase-title p,
body.theme-dark.dashboard-page .settings-menu-copy small { color: #afc1e1 !important; }

body.dashboard-page .profile-settings-card .profile-tabs {
  display: grid !important;
  gap: 10px !important;
  padding: 16px 36px 20px !important;
  background: transparent !important;
}

body.dashboard-page .profile-settings-card .profile-tab.settings-menu-card {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto 48px !important;
  align-items: center;
  gap: 16px !important;
  min-height: 82px !important;
  padding: 10px 16px !important;
  border: 1px solid rgba(104, 135, 190, 0.32) !important;
  border-radius: 14px !important;
  color: #14264c !important;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.98), rgba(238, 245, 255, 0.92)) !important;
  box-shadow: 0 4px 12px rgba(36, 73, 133, 0.08) !important;
  transition: none !important;
}

body.theme-dark.dashboard-page .profile-settings-card .profile-tab.settings-menu-card {
  border-color: rgba(96, 133, 203, 0.3) !important;
  color: #eaf1ff !important;
  background: linear-gradient(105deg, rgba(21, 42, 84, 0.78), rgba(15, 30, 63, 0.66)) !important;
  box-shadow: inset 0 1px 0 rgba(182, 211, 255, 0.04), 0 8px 18px rgba(0, 0, 0, 0.16) !important;
}

body.dashboard-page .profile-settings-card .profile-tab.settings-menu-card.is-active {
  color: #14264c !important;
  border-color: var(--settings-accent) !important;
  background: linear-gradient(105deg, color-mix(in srgb, var(--settings-accent) 10%, #ffffff), rgba(244, 239, 255, 0.92)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--settings-accent) 20%, transparent), 0 8px 20px color-mix(in srgb, var(--settings-accent) 12%, transparent) !important;
}

body.theme-dark.dashboard-page .profile-settings-card .profile-tab.settings-menu-card.is-active {
  color: #f4f8ff !important;
  border-color: var(--settings-accent) !important;
  background: linear-gradient(105deg, color-mix(in srgb, var(--settings-accent) 13%, rgba(16, 31, 68, 0.88)), rgba(32, 15, 61, 0.68)) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--settings-accent) 20%, transparent), inset 0 0 24px color-mix(in srgb, var(--settings-accent) 7%, transparent) !important;
}

body.dashboard-page .profile-settings-card .profile-tab.settings-menu-card:hover,
body.dashboard-page .profile-settings-card .profile-tab.settings-menu-card:focus-visible {
  transform: none !important;
  border-color: rgba(104, 135, 190, 0.32) !important;
  outline: none !important;
  box-shadow: 0 4px 12px rgba(36, 73, 133, 0.08) !important;
}

body.dashboard-page .settings-menu-card .settings-menu-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
body.dashboard-page .settings-menu-card .settings-menu-icon svg { width: 27px; height: 27px; }
body.dashboard-page .settings-menu-copy { gap: 4px; }
body.dashboard-page .settings-menu-copy strong { font-size: 1rem; line-height: 1.2; }
body.dashboard-page .settings-menu-copy small {
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: normal;
}

.settings-menu-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}
.settings-status-active,
.settings-status-safe { color: #0abf73; background: rgba(32, 220, 162, 0.12); border-color: rgba(15, 177, 117, 0.32); }
.settings-status-verified,
.settings-status-regular { color: #1787e8; background: rgba(39, 140, 255, 0.1); border-color: rgba(39, 140, 255, 0.34); }
body.theme-dark .settings-status-active,
body.theme-dark .settings-status-safe { color: #27ee91; background: rgba(32, 220, 162, 0.14); border-color: rgba(32, 220, 162, 0.28); }
body.theme-dark .settings-status-verified,
body.theme-dark .settings-status-regular { color: #2c9eff; background: rgba(39, 140, 255, 0.13); border-color: rgba(39, 140, 255, 0.34); }

body.dashboard-page .settings-menu-arrow {
  width: 48px;
  height: 48px;
  color: #14264c;
  background: rgba(255, 255, 255, 0.24);
}
body.theme-dark.dashboard-page .settings-menu-arrow { color: #eff6ff; background: rgba(5, 19, 47, 0.24); }
body.dashboard-page .settings-menu-arrow svg { width: 25px; height: 25px; }

body.dashboard-page .settings-showcase-footer {
  gap: 14px;
  padding: 18px 36px 20px;
  border-top: 1px solid rgba(95, 133, 194, 0.36);
}
body.dashboard-page .settings-showcase-actions { gap: 24px; }
body.dashboard-page .settings-showcase-save,
body.dashboard-page .settings-showcase-cancel {
  min-height: 52px;
  border-radius: 12px;
  transition: none !important;
}
body.dashboard-page .settings-showcase-save {
  width: fit-content !important;
  min-width: 0 !important;
  padding: 0 20px !important;
  transition: none !important;
}
body.dashboard-page .settings-showcase-cancel {
  width: min(176px, 28%);
  border-color: rgba(74, 132, 220, 0.58);
  background: rgba(230, 239, 255, 0.7);
  color: #17305f;
}
body.theme-dark.dashboard-page .settings-showcase-cancel { background: rgba(9, 25, 55, 0.54); color: #e5efff; }
body.dashboard-page .settings-safe-note { font-size: 0.78rem !important; }

body.dashboard-page .settings-showcase-save:hover,
body.dashboard-page .settings-showcase-save:focus-visible,
body.dashboard-page .settings-showcase-cancel:hover,
body.dashboard-page .settings-showcase-cancel:focus-visible {
  transform: none !important;
  filter: none !important;
}

body.dashboard-page .profile-modern-layout.profile-panel-open::after {
  content: "" !important;
  display: block !important;
  background: rgba(6, 19, 43, 0.28) !important;
  backdrop-filter: blur(2px) !important;
  pointer-events: auto !important;
}

body.dashboard-page.profile-panel-modal-open {
  overflow: hidden !important;
}

body.dashboard-page .profile-modern-layout.profile-panel-open .profile-panel.is-active {
  position: fixed !important;
  z-index: 9010 !important;
  inset: 50% auto auto 50% !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  width: min(92vw, 920px) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: min(86dvh, 760px) !important;
  margin: 0 !important;
  overflow: hidden auto !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24) !important;
}

body.dashboard-page .profile-modern-layout .account-summary-card {
  padding: 18px 24px 22px !important;
  text-align: center !important;
}

body.dashboard-page .account-summary-head {
  display: none !important;
}

body.dashboard-page .account-summary-person {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 2px 0 14px !important;
  text-align: center !important;
}

body.dashboard-page .account-summary-person .profile-avatar-large {
  width: 92px !important;
  height: 92px !important;
  margin: 0 auto !important;
}

body.dashboard-page .account-summary-person-copy {
  justify-items: center !important;
  text-align: center !important;
}

body.dashboard-page .account-summary-person-copy em {
  justify-content: center !important;
}

body.dashboard-page .account-photo-upload {
  width: min(100%, 280px) !important;
  justify-self: center;
  gap: 8px;
  padding: 0 0 16px !important;
}

body.dashboard-page .account-photo-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

body.dashboard-page .account-photo-upload .profile-photo-picker,
body.dashboard-page .account-photo-upload .profile-remove-photo {
  transition: none !important;
}

body.dashboard-page .account-photo-upload .profile-photo-picker {
  border-color: rgba(214, 40, 198, 0.28) !important;
  background: linear-gradient(135deg, #237aff 0%, #2859e8 42%, #d628c6 100%) !important;
  box-shadow: 0 10px 22px rgba(77, 52, 226, 0.24) !important;
}

body.dashboard-page .account-photo-upload .profile-photo-picker .profile-photo-picker-action {
  min-height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.74rem;
}

body.dashboard-page .account-photo-upload .profile-photo-picker:hover,
body.dashboard-page .account-photo-upload .profile-photo-picker:focus-within {
  filter: none !important;
  outline: none !important;
  box-shadow: 0 10px 22px rgba(77, 52, 226, 0.24) !important;
}

body.dashboard-page .settings-tips-card,
body.dashboard-page .settings-tips-card * {
  animation: none !important;
  transition: none !important;
}

body.dashboard-page .account-summary-head h2,
body.dashboard-page .account-summary-person-copy strong,
body.dashboard-page .account-summary-details dd { color: #14264c !important; }
body.dashboard-page .account-summary-head h2 {
  text-transform: none !important;
  letter-spacing: -0.02em !important;
}
body.dashboard-page .account-summary-person-copy small,
body.dashboard-page .account-summary-details dt { color: #657595 !important; }
body.dashboard-page .account-summary-details > div { border-bottom-color: rgba(93, 127, 181, 0.24) !important; }
body.dashboard-page .account-summary-details dt svg { stroke: #607ca8; }
body.theme-dark.dashboard-page .account-summary-head h2,
body.theme-dark.dashboard-page .account-summary-person-copy strong,
body.theme-dark.dashboard-page .account-summary-details dd { color: #f7faff !important; }
body.theme-dark.dashboard-page .account-summary-person-copy small,
body.theme-dark.dashboard-page .account-summary-details dt { color: #c6d4ef !important; }
body.theme-dark.dashboard-page .account-summary-details > div { border-bottom-color: rgba(113, 159, 227, 0.18) !important; }
body.theme-dark.dashboard-page .account-summary-details dt svg { stroke: #b7cbea; }

body.dashboard-page .settings-tips-card header h3 { color: #14264c !important; }
body.dashboard-page .settings-tip-icon { display: grid; place-items: center; color: #f4ae16; }
body.dashboard-page .settings-tip-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
body.dashboard-page .settings-tips-card li { color: #536485 !important; }
body.theme-dark.dashboard-page .settings-tips-card header h3 { color: #f8fbff !important; }
body.theme-dark.dashboard-page .settings-tips-card li { color: #d1dcf2 !important; }

@media (max-width: 1080px) {
  body.dashboard-page .profile-modern-layout { grid-template-columns: minmax(0, 1fr) 320px !important; }
  body.dashboard-page .settings-menu-status { min-width: 68px; padding-inline: 8px; }
  body.dashboard-page .profile-settings-card .profile-tab.settings-menu-card { grid-template-columns: 48px minmax(0, 1fr) auto 42px !important; gap: 12px !important; }
  body.dashboard-page .settings-menu-card .settings-menu-icon { width: 48px; height: 48px; }
  body.dashboard-page .settings-menu-arrow { width: 42px; height: 42px; }
}

@media (max-width: 760px) {
  body.dashboard-page .profile-modern-layout { grid-template-columns: 1fr !important; grid-template-areas: "settings" "summary" "tips" !important; }
  body.dashboard-page .settings-showcase-head { min-height: 96px; padding: 18px 20px 16px; }
  body.dashboard-page .settings-showcase-art { display: none !important; }
  body.dashboard-page .profile-settings-card .profile-tabs { padding: 12px 12px 14px !important; }
  body.dashboard-page .profile-settings-card .profile-tab.settings-menu-card { grid-template-columns: 44px minmax(0, 1fr) 38px !important; min-height: 76px !important; padding: 9px 10px !important; }
  body.dashboard-page .settings-menu-card .settings-menu-icon { width: 44px; height: 44px; }
  body.dashboard-page .settings-menu-status { grid-column: 2; grid-row: 2; justify-self: start; min-height: 26px; font-size: 0.65rem; }
  body.dashboard-page .settings-menu-arrow { grid-column: 3; grid-row: 1 / span 2; width: 38px; height: 38px; }
  body.dashboard-page .settings-menu-copy small { font-size: 0.68rem; }
  body.dashboard-page .settings-showcase-footer { padding: 14px 16px 18px; }
  body.dashboard-page .settings-showcase-actions { gap: 10px; }
  body.dashboard-page .settings-showcase-save { width: fit-content !important; }
  body.dashboard-page .settings-showcase-cancel { width: 38%; }
}

/* 20260724 account settings final: reference parity, photo actions, and modern artwork. */
body.dashboard-page .profile-modern-layout {
  align-items: start !important;
}

body.dashboard-page .profile-modern-layout .account-summary-card,
body.dashboard-page .profile-modern-layout .settings-tips-card {
  align-self: start !important;
  margin-top: 0 !important;
}

body.dashboard-page .account-photo-upload {
  width: min(100%, 280px);
  justify-self: center;
  display: grid;
  gap: 8px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(93, 127, 181, 0.24);
}

body.dashboard-page .account-photo-upload > strong,
body.dashboard-page .account-photo-upload-label {
  color: #657595;
  font-size: 0.74rem;
  font-weight: 800;
}

body.theme-dark.dashboard-page .account-photo-upload > strong,
body.theme-dark.dashboard-page .account-photo-upload-label {
  color: #c6d4ef;
}

body.dashboard-page .account-photo-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px;
}

body.dashboard-page .account-photo-upload .profile-photo-picker,
body.dashboard-page .account-photo-upload .profile-remove-photo {
  width: 100% !important;
  min-height: 42px;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  box-sizing: border-box;
}

body.dashboard-page .account-photo-upload .profile-photo-picker {
  position: relative;
  display: grid !important;
  place-items: center;
  border: 1px solid rgba(214, 40, 198, 0.28) !important;
  background: linear-gradient(135deg, #237aff 0%, #2859e8 42%, #d628c6 100%) !important;
  color: #fff !important;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(77, 52, 226, 0.24) !important;
}

body.dashboard-page .account-photo-upload .profile-photo-picker:hover,
body.dashboard-page .account-photo-upload .profile-photo-picker:focus-within {
  filter: none !important;
  outline: none !important;
  box-shadow: 0 10px 22px rgba(77, 52, 226, 0.24) !important;
}

body.dashboard-page .account-photo-upload .profile-photo-picker input {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  cursor: pointer;
}

body.dashboard-page .account-photo-upload .profile-remove-photo {
  border: 1px solid rgba(225, 29, 94, 0.35) !important;
  background: rgba(225, 29, 94, 0.08) !important;
  color: #d91f58 !important;
  cursor: pointer;
}

body.dashboard-page .account-photo-upload .profile-remove-photo:hover,
body.dashboard-page .account-photo-upload .profile-remove-photo:focus-visible {
  background: rgba(225, 29, 94, 0.14) !important;
  outline: 3px solid rgba(225, 29, 94, 0.16);
  outline-offset: 1px;
}

/* Let the fixed dialog rise above its sibling backdrop instead of being trapped by the card's stacking context. */
body.dashboard-page .profile-modern-layout.profile-panel-open .profile-settings-card {
  isolation: auto !important;
  overflow: visible !important;
}

body.dashboard-page .profile-modern-layout.profile-panel-open .profile-panel.is-active {
  pointer-events: auto !important;
}

body.theme-dark.dashboard-page .account-photo-upload .profile-remove-photo {
  color: #ff9db5 !important;
  border-color: rgba(255, 126, 157, 0.38) !important;
  background: rgba(255, 82, 126, 0.12) !important;
}

body.dashboard-page .account-photo-file-name {
  min-height: 14px;
  overflow-wrap: anywhere;
  color: #657595;
  font-size: 0.66rem;
}

body.theme-dark.dashboard-page .account-photo-file-name { color: #a9bddd; }

body.dashboard-page .settings-menu-card-blue { --settings-accent: #278cff; --settings-icon-surface: linear-gradient(135deg, #2a8dff, #164fc9); }
body.dashboard-page .settings-menu-card-green { --settings-accent: #10c9de; --settings-icon-surface: linear-gradient(135deg, #18d9ed, #087fc8); }
body.dashboard-page .settings-menu-card-orange { --settings-accent: #ff3f86; --settings-icon-surface: linear-gradient(135deg, #ff4e9a, #d71668); }
body.dashboard-page .settings-menu-card-purple { --settings-accent: #ff9f1c; --settings-icon-surface: linear-gradient(135deg, #ffb31f, #ed6b0b); }

body.dashboard-page .settings-menu-card .settings-menu-icon {
  border: 0 !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: var(--settings-icon-surface) !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--settings-accent) 34%, transparent), inset 0 1px 0 rgba(255,255,255,.32) !important;
}

body.dashboard-page .settings-menu-card .settings-menu-icon svg {
  stroke: currentColor !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}

body.dashboard-page .settings-showcase-art,
body.dashboard-page .settings-showcase-art::before,
body.dashboard-page .settings-showcase-art::after,
body.dashboard-page .settings-tips-card::after,
body.dashboard-page .settings-tip-shield {
  display: none !important;
  content: none !important;
}

@media (max-width: 760px) {
  body.dashboard-page .account-photo-actions { gap: 8px; }
  body.dashboard-page .account-photo-upload .profile-photo-picker,
  body.dashboard-page .account-photo-upload .profile-remove-photo { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  body.dashboard-page .account-photo-upload .profile-photo-picker { transition: none; }
}

/* Inventory dashboard redesign */
.inventory-dashboard-shell { display: grid; gap: 18px; }

.inventory-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(255, 247, 224, 0.95), rgba(255, 255, 255, 0.95));
  color: #7a4a05;
  font: inherit;
}
.inventory-alert-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(245, 158, 11, 0.18); color: #b45309; flex: 0 0 34px; }
.inventory-alert-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inventory-alert-copy { flex: 1 1 auto; min-width: 0; }
.inventory-alert-copy strong { display: block; font-size: 0.86rem; font-weight: 700; line-height: 1.4; white-space: normal; }
.inventory-alert-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(120deg, #b45309, #f59e0b);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.18s ease, transform 0.18s ease;
}
.inventory-alert-link:hover,
.inventory-alert-link:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
  outline: none;
}
body.theme-dark .inventory-alert { background: linear-gradient(90deg, rgba(120, 78, 8, 0.28), rgba(21, 30, 48, 0.9)); border-color: rgba(245, 158, 11, 0.4); color: #ffd37a; }
body.theme-dark .inventory-alert-link { color: #1a1206; background: linear-gradient(120deg, #ffb74d, #ffd37a); }

@media (max-width: 640px) {
  .inventory-alert { width: 100%; flex-wrap: wrap; }
  .inventory-alert-link { margin-left: 46px; }
}

.dashboard-stat-card,
.stat-card { position: relative; overflow: hidden; border-radius: 20px; }
.stat-copy { min-width: 0; }
.stat-trend { position: absolute; top: 14px; right: 16px; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.stat-trend.is-positive { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.stat-trend.is-negative { background: rgba(239, 68, 68, 0.14); color: #dc2626; }
.stat-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: currentColor; opacity: 0.18; }

.inventory-composition {
  border: 1px solid rgba(207, 224, 244, 0.95);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  padding: 18px;
  box-shadow: 0 18px 50px rgba(31, 82, 151, 0.06);
  width: 50%;
  max-width: 620px;
}
.inventory-composition-head h2 { margin: 0 0 2px; font-size: 1rem; }
.inventory-composition-head p { margin: 0; color: var(--muted); font-size: 0.78rem; }
.inventory-composition-body { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; margin-top: 14px; }
.inventory-donut {
  width: 118px; height: 118px; border-radius: 50%;
  background: var(--inventory-donut, conic-gradient(#e5e7eb 0 100%));
  display: grid; place-items: center; position: relative; flex: 0 0 auto;
}
.inventory-donut::before { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: #fff; }
body.theme-dark .inventory-donut::before { background: var(--surface); }
.inventory-donut span { position: relative; z-index: 1; display: grid; place-items: center; text-align: center; line-height: 1.2; }
.inventory-donut strong { font-size: 1.3rem; color: #001f72; }
body.theme-dark .inventory-donut strong { color: var(--ink); }
.inventory-donut small { font-size: 0.68rem; color: var(--muted); }
.inventory-composition-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.inventory-composition-list li { display: grid; gap: 4px; }
.inventory-composition-list button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit;
}
.inventory-composition-list button span { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; }
.inventory-composition-list button span i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: currentColor; }
.inventory-composition-list button strong { font-size: 0.85rem; }
.inventory-composition-list button em { font-style: normal; font-size: 0.75rem; color: var(--muted); }
.inventory-composition-list b { display: block; height: 6px; border-radius: 999px; background: rgba(148, 163, 184, 0.25); overflow: hidden; }
.inventory-composition-list b i { display: block; height: 100%; width: 0%; border-radius: inherit; background: currentColor; transition: width 0.3s ease; }
.composition-active { color: #1378ee; }
.composition-inactive { color: #e81798; }
.composition-expiring { color: #14b8a6; }
.composition-minus { color: #f59e0b; }

body.theme-dark .inventory-composition {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 18px 50px rgba(2, 8, 20, 0.4);
}
body.theme-dark .inventory-composition-head h2 { color: var(--ink); }
body.theme-dark .inventory-composition-head p { color: var(--muted); }
body.theme-dark .inventory-composition-list button strong { color: var(--ink); }
body.theme-dark .inventory-composition-list button em { color: var(--muted); }
body.theme-dark .inventory-composition-list b { background: rgba(148, 163, 184, 0.16); }
body.theme-dark .composition-active { color: #4d9bff; }
body.theme-dark .composition-inactive { color: #ff5fb8; }
body.theme-dark .composition-expiring { color: #2dd4bf; }
body.theme-dark .composition-minus { color: #fbbf24; }

@media (max-width: 1180px) {
  .inventory-composition { width: 100%; max-width: none; }
}

@media (max-width: 760px) {
  .inventory-composition-body { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .inventory-composition-list { width: 100%; }
}

/* 2026-07-29 sidebar: pinned-right content and consistent menu metrics. */
@media (min-width: 821px) {
  .app-sidebar,
  body.sidebar-collapsed .app-sidebar,
  body.sidebar-open .app-sidebar,
  body.sidebar-open:not(.home-view-active) .app-sidebar {
    transition: width 220ms ease, box-shadow 220ms ease, padding 220ms ease !important;
    z-index: 1350 !important;
    padding-top: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 24px !important;
    padding-left: 16px !important;
  }

  body.sidebar-open .app-sidebar,
  body.sidebar-open:not(.home-view-active) .app-sidebar {
    box-shadow: 18px 0 45px rgba(8, 28, 64, 0.15) !important;
  }

  /* Push model: left edge follows sidebar, right edge pinned at 100% (stays put). */
  .dashboard-main,
  body.sidebar-collapsed .dashboard-main {
    width: auto !important;
    max-width: none !important;
    margin-left: var(--app-sidebar-rail-width) !important;
    padding-left: var(--app-content-gutter) !important;
    padding-right: var(--app-content-gutter) !important;
    transition: margin-left 220ms ease !important;
  }

  body.sidebar-open .dashboard-main,
  body.sidebar-open:not(.home-view-active) .dashboard-main {
    width: auto !important;
    max-width: none !important;
    margin-left: var(--app-sidebar-open-width) !important;
    padding-left: var(--app-content-gutter) !important;
    padding-right: var(--app-content-gutter) !important;
  }

  /* Grid template brand zone transition */
  .dashboard-topbar,
  body.home-view-active .dashboard-topbar,
  body.sidebar-collapsed .dashboard-topbar {
    --dashboard-header-brand-zone: var(--app-sidebar-rail-width) !important;
    grid-template-columns: var(--dashboard-header-brand-zone) minmax(0, 1fr) max-content !important;
    transition: grid-template-columns 220ms ease !important;
  }

  body.sidebar-open .dashboard-topbar,
  body.sidebar-open:not(.home-view-active) .dashboard-topbar {
    --dashboard-header-brand-zone: var(--app-sidebar-open-width) !important;
    grid-template-columns: var(--dashboard-header-brand-zone) minmax(0, 1fr) max-content !important;
  }

  body.sidebar-collapsed .header-pharmacy-toggle {
    justify-self: center !important;
    margin-left: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    align-self: center !important;
    transition: padding 220ms ease, height 220ms ease !important;
  }

  body.sidebar-open .header-pharmacy-toggle,
  body.sidebar-open:not(.home-view-active) .header-pharmacy-toggle {
    justify-self: center !important;
    margin-left: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    align-self: center !important;
    transition: padding 220ms ease, height 220ms ease !important;
  }

  /* Icon stays pinned at same horizontal position in both states.
     Only the link width expands right; gap pushes label out. */
  .app-sidebar .sidebar-link,
  body.sidebar-collapsed .app-sidebar .sidebar-link,
  body.sidebar-open .app-sidebar .sidebar-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 7px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    gap: 12px !important;
    transition: background-color 220ms ease, border-radius 220ms ease !important;
  }

  body.sidebar-collapsed .app-sidebar .sidebar-nav {
    align-items: center !important;
  }

  /* Icon pinned to left edge in both states — no horizontal drift on toggle */
  .app-sidebar .sidebar-link .sidebar-icon,
  body.sidebar-collapsed .app-sidebar .sidebar-link .sidebar-icon,
  body.sidebar-open .app-sidebar .sidebar-link .sidebar-icon,
  body.theme-dark .app-sidebar .sidebar-link .sidebar-icon,
  body.theme-dark.sidebar-collapsed .app-sidebar .sidebar-link .sidebar-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  /* Section toggles: chevron follows label layout, no left-right jump */
  .app-sidebar .sidebar-section-toggle {
    position: relative !important;
  }
  .app-sidebar .sidebar-section-toggle .sidebar-section-chevron {
    margin-left: auto !important;
    margin-right: 4px !important;
  }
  body.sidebar-collapsed .app-sidebar .sidebar-section-toggle .sidebar-section-chevron {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .app-sidebar .sidebar-link:hover .sidebar-icon,
  .app-sidebar .sidebar-link.is-active .sidebar-icon,
  body.sidebar-collapsed .app-sidebar .sidebar-link:hover .sidebar-icon,
  body.sidebar-collapsed .app-sidebar .sidebar-link.is-active .sidebar-icon {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .app-sidebar .sidebar-section-toggle,
  body.sidebar-collapsed .app-sidebar .sidebar-section-toggle,
  body.sidebar-open .app-sidebar .sidebar-section-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 7px !important;
    margin: 8px 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
    transition: background-color 220ms ease !important;
  }

  body.sidebar-collapsed .app-sidebar .sidebar-section-toggle {
    width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    margin-inline: auto !important;
    justify-content: center !important;
  }

  /* Allow 2-line labels ("Surat Pesanan Pembelian", "Manajemen Pengguna") without clipping */
  .app-sidebar .sidebar-label,
  body.sidebar-collapsed .app-sidebar .sidebar-label {
    display: inline-block !important;
    white-space: normal !important;
    line-height: 1.15 !important;
    transition: max-width 220ms ease, opacity 180ms ease, margin-left 220ms ease !important;
  }

  body.sidebar-collapsed .app-sidebar .sidebar-label {
    max-width: 0px !important;
    opacity: 0 !important;
    margin-left: 0 !important;
  }

  body.sidebar-open .app-sidebar .sidebar-label {
    max-width: 220px !important;
    opacity: 1 !important;
    margin-left: 12px !important;
  }

  /* Smooth section label transition; brand copy uses deterministic sidebar state. */
  .app-sidebar .sidebar-section,
  .app-sidebar .sidebar-section-toggle .sidebar-section,
  body.sidebar-collapsed .app-sidebar .sidebar-section,
  body.sidebar-collapsed .app-sidebar .sidebar-section-toggle .sidebar-section {
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.15 !important;
    transition: max-width 220ms ease, opacity 180ms ease !important;
  }

  body.sidebar-collapsed .app-sidebar .sidebar-section,
  body.sidebar-collapsed .app-sidebar .sidebar-section-toggle .sidebar-section {
    max-width: 0px !important;
    opacity: 0 !important;
  }

  body.sidebar-open .app-sidebar .sidebar-section,
  body.sidebar-open .app-sidebar .sidebar-section-toggle .sidebar-section {
    max-width: 220px !important;
    opacity: 1 !important;
  }

  #sidebarToggle.header-pharmacy-toggle {
    overflow: hidden !important;
  }

  body.sidebar-collapsed #sidebarToggle .header-pharmacy-copy,
  body:not(.sidebar-open) #sidebarToggle .header-pharmacy-copy {
    display: none !important;
    visibility: hidden !important;
  }

  body.sidebar-open #sidebarToggle .header-pharmacy-copy {
    display: grid !important;
    visibility: visible !important;
    min-width: 0 !important;
  }

  .app-sidebar .sidebar-section-chevron {
    transition: width 220ms ease, height 220ms ease, flex-basis 220ms ease !important;
  }

  /* Unify sidebar navigation gap to prevent vertical icon shift */
  .app-sidebar .sidebar-nav,
  body.sidebar-collapsed .app-sidebar .sidebar-nav {
    gap: 8px !important;
  }

  /* Reset margin on sidebar section labels inside toggle button */
  .app-sidebar .sidebar-section-toggle .sidebar-section {
    margin: 0 !important;
  }
}

@media (max-width: 900px) {
  #sidebarToggle .header-pharmacy-copy {
    display: none !important;
    visibility: hidden !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar,
  .sidebar-link,
  .sidebar-section-toggle,
  .header-pharmacy-toggle {
    transition: none !important;
  }
}

/* 2026-08-06: icons always visible during reload — access filtering applies
   hidden attributes imperatively, so CSS hiding during access-loading only
   caused a 2.5s blank sidebar on every reload. */

/* Access visibility must beat desktop/sidebar display overrides. */
[data-access-key][hidden],
[data-access-key].is-access-hidden,
body .app-sidebar .sidebar-link[hidden],
body .app-sidebar .sidebar-link.is-access-hidden,
body .app-sidebar .sidebar-section-toggle[hidden],
body .sidebar-section-group[hidden] {
  display: none !important;
}

/* 2026-07-29: Restore normal vertical scroll chaining on attendance table wrap */
#view-presensi .attendance-table-wrap {
  overscroll-behavior-y: auto !important;
}

/* 2026-08-01 sidebar shell: one geometry contract after legacy overrides. */
.app-sidebar .sidebar-section-toggle,
.app-sidebar .sidebar-section-toggle:hover,
.app-sidebar .sidebar-section-toggle:focus-visible {
  min-height: 44px !important;
  transform: none !important;
}

.app-sidebar .sidebar-section-chevron,
body.sidebar-collapsed .app-sidebar .sidebar-section-chevron {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  padding: 3px !important;
  transform-origin: center !important;
  transition: transform 220ms ease !important;
}

.app-sidebar .sidebar-section-toggle[aria-expanded="false"] .sidebar-section-chevron {
  transform: rotate(-90deg) !important;
}

/* Fixed metrics so expand/collapse of Master Data / Sistem never shifts
   neighbouring icons or the sidebar padding. Gap stays constant; only
   max-height animates. */
.app-sidebar .sidebar-section-group,
.app-sidebar .sidebar-section-group.is-collapsed {
  gap: 6px !important;
  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: max-height 260ms ease, opacity 180ms ease !important;
}

.app-sidebar .sidebar-section-group {
  max-height: 760px !important;
}

.app-sidebar .sidebar-section-group.is-collapsed {
  max-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.app-sidebar .sidebar-section-toggle,
.app-sidebar .sidebar-section-toggle.is-collapsed,
body.sidebar-collapsed .app-sidebar .sidebar-section-toggle {
  margin: 8px 0 !important;
}

@media (min-width: 901px) {
  .app-sidebar,
  body.sidebar-collapsed .app-sidebar,
  body.sidebar-open .app-sidebar,
  body.sidebar-open:not(.home-view-active) .app-sidebar {
    position: fixed !important;
    inset: var(--desktop-dashboard-header-height, 86px) auto 0 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: none !important;
    transition: width 220ms ease, max-width 220ms ease, padding 220ms ease, box-shadow 220ms ease !important;
  }

  .app-sidebar,
  body.sidebar-collapsed .app-sidebar {
    width: var(--app-sidebar-rail-width, 76px) !important;
    max-width: var(--app-sidebar-rail-width, 76px) !important;
    padding: 16px !important;
  }

  body.sidebar-open .app-sidebar,
  body.sidebar-open:not(.home-view-active) .app-sidebar {
    width: var(--app-sidebar-open-width, 272px) !important;
    max-width: var(--app-sidebar-open-width, 272px) !important;
    padding: 16px !important;
  }

  .dashboard-main,
  body.sidebar-collapsed .dashboard-main {
    width: auto !important;
    max-width: none !important;
    margin-left: var(--app-sidebar-rail-width, 76px) !important;
    transition: margin-left 220ms ease !important;
  }

  body.sidebar-open .dashboard-main,
  body.sidebar-open:not(.home-view-active) .dashboard-main {
    width: auto !important;
    max-width: none !important;
    margin-left: var(--app-sidebar-open-width, 272px) !important;
  }

  .dashboard-topbar,
  body.home-view-active .dashboard-topbar,
  body.sidebar-collapsed .dashboard-topbar,
  body.sidebar-open .dashboard-topbar,
  body.sidebar-open:not(.home-view-active) .dashboard-topbar {
    --dashboard-header-brand-zone: var(--app-sidebar-rail-width, 76px);
    grid-template-columns: var(--dashboard-header-brand-zone) minmax(0, 1fr) max-content !important;
    column-gap: clamp(12px, 1.6vw, 24px) !important;
    overflow: hidden !important;
    transition: grid-template-columns 220ms ease !important;
  }

  body.sidebar-open .dashboard-topbar,
  body.sidebar-open:not(.home-view-active) .dashboard-topbar {
    --dashboard-header-brand-zone: var(--app-sidebar-open-width, 272px);
  }

  #sidebarToggle.header-pharmacy-toggle,
  body.sidebar-collapsed #sidebarToggle.header-pharmacy-toggle,
  body.sidebar-open #sidebarToggle.header-pharmacy-toggle {
    align-self: center !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    transform: none !important;
    transition: width 220ms ease, max-width 220ms ease, padding 220ms ease !important;
  }

  body.sidebar-collapsed #sidebarToggle.header-pharmacy-toggle {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    justify-self: center !important;
  }

  body.sidebar-open #sidebarToggle.header-pharmacy-toggle {
    width: calc(var(--app-sidebar-open-width, 272px) - 8px) !important;
    min-width: 0 !important;
    max-width: calc(var(--app-sidebar-open-width, 272px) - 8px) !important;
    justify-self: center !important;
  }

  #dashboardViewTitle,
  .dashboard-title h1 {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .dashboard-status {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .app-sidebar .sidebar-link,
  body.sidebar-collapsed .app-sidebar .sidebar-link,
  body.sidebar-open .app-sidebar .sidebar-link {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding-block: 4px !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.sidebar-collapsed .app-sidebar .sidebar-section-toggle {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    margin-inline: auto !important;
    padding: 7px !important;
  }

  .app-sidebar .sidebar-link .sidebar-icon,
  body.sidebar-collapsed .app-sidebar .sidebar-link .sidebar-icon,
  body.sidebar-open .app-sidebar .sidebar-link .sidebar-icon,
  body.theme-dark .app-sidebar .sidebar-link .sidebar-icon,
  body.theme-dark.sidebar-collapsed .app-sidebar .sidebar-link .sidebar-icon {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    object-fit: contain !important;
    object-position: center !important;
    clip-path: none !important;
    transform: none !important;
    transition: transform 180ms ease !important;
  }

  .app-sidebar .sidebar-link:hover .sidebar-icon,
  .app-sidebar .sidebar-link.is-active .sidebar-icon,
  body.sidebar-collapsed .app-sidebar .sidebar-link:hover .sidebar-icon,
  body.sidebar-collapsed .app-sidebar .sidebar-link.is-active .sidebar-icon,
  body.theme-dark .app-sidebar .sidebar-link:hover .sidebar-icon,
  body.theme-dark .app-sidebar .sidebar-link.is-active .sidebar-icon,
  body.theme-dark.sidebar-collapsed .app-sidebar .sidebar-link.is-active .sidebar-icon {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }
}

@media (max-width: 900px) {
  .app-sidebar,
  body.sidebar-collapsed .app-sidebar,
  body.sidebar-open .app-sidebar {
    position: fixed !important;
    top: var(--desktop-dashboard-header-height, 86px) !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    box-sizing: border-box !important;
    width: min(86vw, 320px) !important;
    max-width: min(86vw, 320px) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transition: transform 220ms ease, box-shadow 220ms ease !important;
  }

  .app-sidebar,
  body.sidebar-collapsed .app-sidebar {
    transform: translateX(calc(-100% - 12px)) !important;
    box-shadow: none !important;
  }

  body.sidebar-open .app-sidebar {
    transform: translateX(0) !important;
    box-shadow: 18px 0 45px rgba(8, 28, 64, 0.15) !important;
  }

  .dashboard-main,
  body.sidebar-collapsed .dashboard-main,
  body.sidebar-open .dashboard-main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .sidebar-scrim:not([hidden]) {
    display: block !important;
  }

  #sidebarToggle.header-pharmacy-toggle {
    transform: none !important;
  }

  .app-sidebar .sidebar-link .sidebar-icon,
  body.sidebar-collapsed .app-sidebar .sidebar-link .sidebar-icon,
  body.sidebar-open .app-sidebar .sidebar-link .sidebar-icon,
  body.theme-dark .app-sidebar .sidebar-link .sidebar-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

@media (max-width: 820px) {
  .app-sidebar,
  body.sidebar-collapsed .app-sidebar,
  body.sidebar-open .app-sidebar {
    top: var(--mobile-dashboard-header-height, 154px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar,
  .dashboard-main,
  .dashboard-topbar,
  #sidebarToggle.header-pharmacy-toggle,
  .app-sidebar .sidebar-section-chevron,
  .app-sidebar .sidebar-section-group {
    transition: none !important;
  }
}

.dashboard-topbar:has(.header-profile-menu .profile-dropdown:not([hidden])) {
  z-index: 1600 !important;
  overflow: visible !important;
}

/* 2026-08-10 sidebar icons: smooth circles, smaller open state, scrollbar-safe rail. */
@media (min-width: 901px) {
  .app-sidebar .sidebar-link,
  body.sidebar-collapsed .app-sidebar .sidebar-link,
  body.sidebar-open .app-sidebar .sidebar-link {
    padding-inline: 4px !important;
  }

  .app-sidebar .sidebar-link .sidebar-icon,
  body.sidebar-open .app-sidebar .sidebar-link .sidebar-icon,
  body.theme-dark .app-sidebar .sidebar-link .sidebar-icon,
  body.theme-dark.sidebar-open .app-sidebar .sidebar-link .sidebar-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
    object-position: center !important;
    clip-path: circle(50%) !important;
    image-rendering: auto;
    transform: none !important;
    transition: none !important;
  }

  body.sidebar-collapsed .app-sidebar .sidebar-link .sidebar-icon,
  body.theme-dark.sidebar-collapsed .app-sidebar .sidebar-link .sidebar-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
    object-position: center !important;
    clip-path: circle(50%) !important;
    image-rendering: auto;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 900px) {
  .app-sidebar .sidebar-link .sidebar-icon,
  body.sidebar-collapsed .app-sidebar .sidebar-link .sidebar-icon,
  body.sidebar-open .app-sidebar .sidebar-link .sidebar-icon,
  body.theme-dark .app-sidebar .sidebar-link .sidebar-icon {
    border-radius: 50% !important;
    object-fit: contain !important;
    object-position: center !important;
    clip-path: circle(50%) !important;
    image-rendering: auto;
  }
}