/*
 * Zenara V5.17.0b5l
 * Scope: Real Profit semantic color is assigned by renderer.
 * This file only adds the requested modern-gold desktop hover for
 * the top-right + Transaksi CTA.
 */

@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  body.zenara-hostinger-shell
  .topbar > .primary-btn[data-page-jump="transactions"] {
    transition:
      background-color 180ms ease,
      color 180ms ease,
      box-shadow 180ms ease;
  }

  body.zenara-hostinger-shell
  .topbar > .primary-btn[data-page-jump="transactions"]:hover {
    background:#e7c44f !important;
    color:#0f1a33 !important;
    box-shadow:
      0 14px 28px rgba(201,162,39,.24),
      inset 0 0 0 1px #d3aa24 !important;
  }
}

/* ======================================================================
   V5.17.0b5m — Portfolio Value Fit + Gold Action Hover + Metadata Grid
   Strict scope:
   1. Detail Emas NILAI stays on one line for long currency values.
   2. Requested Portfolio action buttons use the same modern-gold hover.
   3. Detail Emas metadata uses 2 columns + full-width serial row.
   ====================================================================== */

/* Detail Emas — compact currency value, including Rp 2.530.000.000. */
body.zenara-hostinger-shell #portfolio
.portfolio-card-values .portfolio-card-nilai-value {
  font-size: clamp(12px, 1.05vw, 15px) !important;
  line-height: 1.2 !important;
  letter-spacing: -.03em !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Detail Emas metadata:
   [ asset ] [ location ]
   [ serial             ] */
body.zenara-hostinger-shell #portfolio
.portfolio-card-meta.mobile-native-meta.portfolio-card-meta-compact {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  column-gap: 12px !important;
  row-gap: 7px !important;
}

body.zenara-hostinger-shell #portfolio
.portfolio-card-meta.mobile-native-meta.portfolio-card-meta-compact
> .portfolio-card-meta-item {
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}

body.zenara-hostinger-shell #portfolio
.portfolio-card-meta.mobile-native-meta.portfolio-card-meta-compact
> .portfolio-card-meta-item:nth-child(3) {
  grid-column: 1 / -1 !important;
}

/* Strong mobile override against the previous three-column legacy rule. */
@media (max-width: 768px) {
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell #portfolio
  .portfolio-card-meta.mobile-native-meta.portfolio-card-meta-compact {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
  }

  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell #portfolio
  .portfolio-card-meta.mobile-native-meta.portfolio-card-meta-compact
  > .portfolio-card-meta-item:nth-child(3) {
    grid-column: 1 / -1 !important;
  }
}

/* Same soft-gold hover used by + Transaksi.
   Pointer devices only: no sticky hover on touch/mobile. */
@media (hover: hover) and (pointer: fine) {
  body.zenara-hostinger-shell #portfolio
  .portfolio-lot-actions > button:not(:disabled),
  body.zenara-hostinger-shell #assetEditModalBackdrop
  .sell-modal-actions > button:not(:disabled),
  body.zenara-hostinger-shell #sellModalBackdrop
  .sell-modal-actions > button:not(:disabled) {
    transition:
      background-color 180ms ease,
      color 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease !important;
  }

  body.zenara-hostinger-shell #portfolio
  .portfolio-lot-actions > button:not(:disabled):hover,
  body.zenara-hostinger-shell #assetEditModalBackdrop
  .sell-modal-actions > button:not(:disabled):hover,
  body.zenara-hostinger-shell #sellModalBackdrop
  .sell-modal-actions > button:not(:disabled):hover {
    background: #e7c44f !important;
    color: #0f1a33 !important;
    border-color: #d3aa24 !important;
    box-shadow:
      0 14px 28px rgba(201, 162, 39, .24),
      inset 0 0 0 1px #d3aa24 !important;
  }
}

/* ======================================================================
   V5.17.0b5n — Transaction Header + Currency + Gold Hover
   Strict scope:
   1. Remove background/border decoration from Tambah Pembelian Emas header.
   2. Add the same modern-gold hover to Simpan Pembelian.
   Currency prefix is handled in the transaction-history renderer.
   ====================================================================== */

/* Tambah Pembelian Emas: plain header, matching Riwayat Terakhir. */
body.zenara-hostinger-shell
#transactions.transaction-page
#transactionForm.transaction-form
> .page-card-hero.full {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Same soft-gold hover as + Transaksi; mouse/pointer devices only. */
@media (hover: hover) and (pointer: fine) {
  body.zenara-hostinger-shell
  #transactions.transaction-page
  #saveTransactionBtn:not(:disabled) {
    transition:
      background-color 180ms ease,
      color 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease !important;
  }

  body.zenara-hostinger-shell
  #transactions.transaction-page
  #saveTransactionBtn:not(:disabled):hover {
    background: #e7c44f !important;
    color: #0f1a33 !important;
    border-color: #d3aa24 !important;
    box-shadow:
      0 14px 28px rgba(201, 162, 39, .24),
      inset 0 0 0 1px #d3aa24 !important;
  }
}

/* ======================================================================
   V5.17.0b5o — Settings Header + Gold Action Hover
   Strict scope:
   1. Settings header is plain like Account.
   2. Requested Settings action buttons use the existing modern-gold hover.
   ====================================================================== */

/* Settings header: plain text, matching Account panel heading. */
body.zenara-hostinger-shell
#settings.settings-page
#settingsForm
> .page-card-hero.full {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Same soft-gold hover as + Transaksi; pointer devices only. */
@media (hover: hover) and (pointer: fine) {
  body.zenara-hostinger-shell #settings.settings-page
  #saveSettingsBtn:not(:disabled),
  body.zenara-hostinger-shell #settings.settings-page
  #googleLogoutBtn:not(:disabled),
  body.zenara-hostinger-shell #settings.settings-page
  #addGoalRowBtn:not(:disabled),
  body.zenara-hostinger-shell #settings.settings-page
  #saveGoalPlannerBtn:not(:disabled) {
    transition:
      background-color 180ms ease,
      color 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease !important;
  }

  body.zenara-hostinger-shell #settings.settings-page
  #saveSettingsBtn:not(:disabled):hover,
  body.zenara-hostinger-shell #settings.settings-page
  #googleLogoutBtn:not(:disabled):hover,
  body.zenara-hostinger-shell #settings.settings-page
  #addGoalRowBtn:not(:disabled):hover,
  body.zenara-hostinger-shell #settings.settings-page
  #saveGoalPlannerBtn:not(:disabled):hover {
    background: #e7c44f !important;
    color: #0f1a33 !important;
    border-color: #d3aa24 !important;
    box-shadow:
      0 14px 28px rgba(201, 162, 39, .24),
      inset 0 0 0 1px #d3aa24 !important;
  }
}

/* ======================================================================
   V5.17.0b5p — Mobile Dashboard Visual Contract Restore
   Strict scope:
   1. Restore premium white/cream dashboard surfaces under zenara-mobile-v2.
   2. Restore Goal Planner progress track and fill.
   3. Preserve all V2 dimensions, layout, renderer, data, and backend logic.
   ====================================================================== */

@media (max-width: 768px) {
  /* Dashboard main cards: restore the visual layer that previously lived
     behind the retired mobile-ux-force selector. */
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-hero-card,
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-market-data-card,
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-goal-planner-card {
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid rgba(201, 162, 39, .16) !important;
    overflow: hidden !important;
  }

  /* Current Market Value hero keeps the premium warm-gold gradient. */
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-hero-card.mn-market-hero {
    background: linear-gradient(135deg, #fff7d6 0%, #ffffff 78%) !important;
  }

  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-hero-top {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-hero-top > span,
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-section-title > span,
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-section-title > small {
    color: #7b6b45 !important;
  }

  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-hero-top > strong {
    color: #151515 !important;
  }

  /* Real Profit inner card. Semantic positive/negative colors remain owned
     by the renderer and are intentionally not overridden here. */
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-real-profit-card {
    background: rgba(255, 255, 255, .88) !important;
    border: 1px solid rgba(201, 162, 39, .14) !important;
    box-shadow: 0 8px 20px rgba(39, 31, 13, .05) !important;
  }

  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-real-profit-card > span,
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-real-profit-card > small,
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-market-data-grid span {
    color: #7b6b45 !important;
  }

  /* Market Data metric tiles. */
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-market-data-grid > div {
    box-sizing: border-box !important;
    background: #fffaf0 !important;
    border: 1px solid rgba(201, 162, 39, .16) !important;
    box-shadow: 0 8px 18px rgba(39, 31, 13, .045) !important;
  }

  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-market-data-grid strong {
    color: #2f2610 !important;
  }

  /* Goal Planner cards and percentage accent. */
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-goal-item,
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-goal-empty {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #fffaf0 !important;
    border: 1px solid rgba(201, 162, 39, .16) !important;
    box-shadow: 0 8px 18px rgba(39, 31, 13, .045) !important;
  }

  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-goal-item-head {
    color: #151515 !important;
  }

  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-goal-item-head > strong {
    color: #c9a227 !important;
  }

  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-goal-meta {
    color: #7b6b45 !important;
  }

  /* Progress bar: the markup and calculated width already exist; these
     rules restore the missing visual track and fill. */
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-progress {
    display: block !important;
    width: 100% !important;
    height: 8px !important;
    margin: 9px 0 !important;
    border-radius: 999px !important;
    background: #f2e8cc !important;
    overflow: hidden !important;
  }

  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-progress > div {
    display: block !important;
    height: 100% !important;
    min-height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #c9a227, #f2c94c) !important;
  }

  /* Goal summary footer keeps its own distinct white surface. */
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #mobileNativeDashboard .mn-goal-summary {
    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #6c5316 !important;
    border: 1px solid rgba(201, 162, 39, .22) !important;
    box-shadow: 0 8px 18px rgba(39, 31, 13, .045) !important;
  }
}


/* ======================================================================
   V5.17.0b5q — Auth Feedback + Loading Ellipsis Polish
   Strict scope:
   1. Login/Register helper copy is removed; idle status area is empty.
   2. Auth submit feedback is centered "Mohon tunggu" + animated ellipsis.
   3. Full-page loader contains only logo, "Mohon tunggu", and ellipsis.
   4. No auth, session, API, backend, or data-flow behavior is changed.
   ====================================================================== */

/* Reusable Zenara ellipsis. */
.zenara-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  line-height: 1;
}

.zenara-ellipsis > i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #c9a227, #f3d36b);
  box-shadow: 0 3px 8px rgba(201, 162, 39, .22);
  opacity: .28;
  transform: translateY(0) scale(.86);
  animation: zenaraEllipsisPulse 1.15s ease-in-out infinite;
}

.zenara-ellipsis > i:nth-child(2) { animation-delay: .14s; }
.zenara-ellipsis > i:nth-child(3) { animation-delay: .28s; }

@keyframes zenaraEllipsisPulse {
  0%, 70%, 100% {
    opacity: .28;
    transform: translateY(0) scale(.86);
  }
  35% {
    opacity: 1;
    transform: translateY(-3px) scale(1);
  }
}

/* Full-page loader: logo + message + ellipsis only. */
.loading-overlay .loader-card {
  width: min(290px, calc(100vw - 48px));
  padding: 30px 28px 28px;
  border-radius: 28px;
}

.loading-overlay .loader-logo {
  margin-bottom: 19px;
}

.loading-overlay .loader-card > strong {
  margin: 0;
  color: #111827;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 850;
}

.loading-overlay .loader-card > .zenara-ellipsis {
  margin-top: 15px;
}

/* Auth feedback: empty before submit, centered after submit. */
.auth-screen .auth-status {
  min-height: 48px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.auth-screen .auth-status:empty {
  visibility: hidden;
}

.auth-screen .auth-status.is-loading {
  visibility: visible;
  flex-direction: column;
  gap: 9px;
  color: #667085;
  font-weight: 800;
}

.auth-screen .auth-status.is-loading .auth-wait-label {
  display: block;
  line-height: 1.2;
}

.auth-screen .auth-status.is-loading .zenara-ellipsis {
  display: inline-flex;
}

/* The previous pilot/helper note is intentionally absent from markup. */
.auth-screen .auth-note {
  display: none !important;
}

@media (max-width: 768px) {
  .loading-overlay .loader-card {
    width: min(280px, calc(100vw - 44px));
    padding: 28px 24px 26px;
  }

  .loading-overlay .loader-logo {
    width: 64px;
    height: 64px;
    border-radius: 21px;
    font-size: 21px;
  }

  .loading-overlay .loader-card > strong {
    font-size: 20px;
  }

  .auth-screen .auth-status {
    min-height: 50px;
    margin-top: 12px;
  }
}

/* ======================================================================
   V5.17.0b5r — Ellipsis Motion Compatibility Fix
   Keep the loading feedback alive when Android/Chrome reports reduced
   motion. The movement remains intentionally small and functional.
   ====================================================================== */

.zenara-ellipsis > i {
  animation-name: zenaraEllipsisPulse !important;
  animation-duration: 1.15s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
  will-change: opacity, transform;
}

.zenara-ellipsis > i:nth-child(1) { animation-delay: 0s !important; }
.zenara-ellipsis > i:nth-child(2) { animation-delay: .14s !important; }
.zenara-ellipsis > i:nth-child(3) { animation-delay: .28s !important; }

@media (prefers-reduced-motion: reduce) {
  /* This loader is status feedback, not decorative motion. Retain a softer
     two-pixel pulse instead of disabling it completely. */
  .zenara-ellipsis > i {
    animation-name: zenaraEllipsisReducedPulse !important;
    animation-duration: 1.35s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-fill-mode: both !important;
  }
}

@keyframes zenaraEllipsisReducedPulse {
  0%, 72%, 100% {
    opacity: .32;
    transform: translateY(0) scale(.90);
  }
  36% {
    opacity: 1;
    transform: translateY(-2px) scale(1);
  }
}


/* ======================================================================
   V5.17.0b5u — Chat Admin Navigation + True Center Alignment
   Adds an external WhatsApp support action to desktop and mobile navigation.
   No internal route, backend, session, or application data behavior changes.
   ====================================================================== */

/* Desktop sidebar: same rhythm as internal menu, but remains an external link. */
.sidebar .admin-nav-link {
  box-sizing: border-box;
  min-height: 44px;
  padding: 12px 15px;
  border-radius: var(--radius-md, 14px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--muted, #667085);
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.sidebar .admin-nav-link:hover,
.sidebar .admin-nav-link:focus-visible {
  color: #0b7753;
  background: #e9f8f0;
  outline: none;
}

.sidebar .admin-nav-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 159, 110, .18);
}

.sidebar .admin-nav-icon {
  display: none;
  width: 24px;
  height: 24px;
  place-items: center;
  color: currentColor;
}

.sidebar .admin-nav-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

body.sidebar-collapsed .sidebar .admin-nav-icon {
  width: 24px;
  height: 24px;
  margin: 0;
  line-height: 0;
  transform: translate(0, 0);
}

.sidebar .admin-nav-label {
  display: inline;
}

/* Manual collapse on desktop. */
body.sidebar-collapsed .sidebar .admin-nav-link {
  display: grid;
  place-items: center;
  width: 46px;
  min-width: 46px;
  max-width: 46px;
  height: 46px;
  min-height: 46px;
  margin: 0 auto;
  padding: 0;
  border-radius: var(--radius-lg, 16px);
  font-size: 0;
  line-height: 1;
  text-align: center;
}
body.sidebar-collapsed .sidebar .admin-nav-icon { display: grid; }
body.sidebar-collapsed .sidebar .admin-nav-label { display: none; }

/* Automatic narrow desktop/tablet sidebar mirrors the internal menu icons. */
@media (min-width: 901px) and (max-width: 1180px) {
  .sidebar .admin-nav-link {
    display: grid;
    place-items: center;
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    height: 46px;
    min-height: 46px;
    margin: 0 auto;
    padding: 0;
    border-radius: var(--radius-lg, 16px);
    font-size: 0;
    line-height: 1;
    text-align: center;
  }
  .sidebar .admin-nav-icon { display: grid; }
  .sidebar .admin-nav-label { display: none; }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .sidebar .admin-nav-icon {
    width: 24px;
    height: 24px;
    margin: 0;
    line-height: 0;
    transform: translate(0, 0);
  }
}

/* If the slide-out sidebar is used on a smaller viewport, keep the full label. */
@media (max-width: 900px) {
  .sidebar .admin-nav-link,
  body.sidebar-collapsed .sidebar .admin-nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    min-height: 44px;
    padding: 14px 16px;
    font-size: 14px;
  }
  .sidebar .admin-nav-icon,
  body.sidebar-collapsed .sidebar .admin-nav-icon { display: none; }
  .sidebar .admin-nav-label,
  body.sidebar-collapsed .sidebar .admin-nav-label { display: inline; }
}

/* Mobile: five equal navigation slots, unchanged bar height. */
@media (max-width: 768px) {
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell.auth-ready:not(.auth-required):not(.loading) nav.bottom-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    column-gap: 1px !important;
  }

  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell.auth-ready:not(.auth-required):not(.loading) nav.bottom-nav > button.bottom-nav-item {
    padding-left: 1px !important;
    padding-right: 1px !important;
  }

  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell.auth-ready:not(.auth-required):not(.loading) nav.bottom-nav > button.bottom-nav-admin {
    color: #667386 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell.auth-ready:not(.auth-required):not(.loading) nav.bottom-nav > button.bottom-nav-admin:active {
    color: #0b7753 !important;
    background: #eefaf5 !important;
  }
}

@media (max-width: 360px) {
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell.auth-ready:not(.auth-required):not(.loading) nav.bottom-nav > button.bottom-nav-item > strong {
    font-size: 9px !important;
    letter-spacing: -.025em !important;
  }
}


/* ======================================================================
   V5.17.0b5u — Admin Icon True Center Fix
   The expanded rule uses justify-content:flex-start. In collapsed mode,
   explicitly switch to flex centering so that property cannot leak into
   the compact 46px icon button.
   ====================================================================== */
@media (min-width: 901px) {
  body.sidebar-collapsed .sidebar .admin-nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  body.sidebar-collapsed .sidebar .admin-nav-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  body.sidebar-collapsed .sidebar .admin-nav-icon svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  body:not(.sidebar-collapsed) .sidebar .admin-nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  body:not(.sidebar-collapsed) .sidebar .admin-nav-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 24px !important;
    margin: 0 !important;
  }
}


/* ======================================================================
   V5.17.0b5v — Portfolio Serial Card + Sell Modal Column Contract
   Strict scope:
   1. Move serial information into a full-width card above Nilai/Profit.
   2. Align sell modal input and summary columns with the action buttons.
   3. Keep the same two-column sell layout on desktop and mobile.
   ====================================================================== */

/* Detail Emas: asset and location remain a clean two-column metadata row. */
body.zenara-hostinger-shell #portfolio
.portfolio-card-meta.mobile-native-meta.portfolio-card-meta-compact {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
}

/* Serial becomes its own full-width visual card, matching Nilai/Profit. */
body.zenara-hostinger-shell #portfolio .portfolio-card-serial-card {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  background: #F8FAFC !important;
  border: 1px solid rgba(226, 232, 240, .9) !important;
  border-radius: var(--radius-lg, 16px) !important;
  padding: 12px !important;
  color: #475569 !important;
  font-size: var(--font-sm, 14px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

body.zenara-hostinger-shell #portfolio .portfolio-card-serial-card > span {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Sell modal uses one column contract from fields through buttons.
   Left column follows Batal; right column follows Jual Sekarang. */
body.zenara-hostinger-shell #sellModalBackdrop .sell-modal-grid,
body.zenara-hostinger-shell #sellModalBackdrop .sell-summary,
body.zenara-hostinger-shell #sellModalBackdrop .sell-modal-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) !important;
  align-items: stretch !important;
  column-gap: 12px !important;
}

body.zenara-hostinger-shell #sellModalBackdrop .sell-modal-grid > label,
body.zenara-hostinger-shell #sellModalBackdrop .sell-summary > div,
body.zenara-hostinger-shell #sellModalBackdrop .sell-modal-actions > button {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Mobile keeps the desktop two-column composition instead of stacking. */
@media (max-width: 768px) {
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell #portfolio
  .portfolio-card-meta.mobile-native-meta.portfolio-card-meta-compact {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    column-gap: 10px !important;
    row-gap: 0 !important;
  }

  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell #portfolio
  .portfolio-card-serial-card {
    min-height: 52px !important;
    padding: 10px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #sellModalBackdrop .sell-modal-grid,
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #sellModalBackdrop .sell-summary,
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #sellModalBackdrop .sell-modal-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) !important;
    align-items: stretch !important;
    column-gap: 8px !important;
  }

  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #sellModalBackdrop .sell-modal-grid > label,
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #sellModalBackdrop .sell-summary > div,
  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #sellModalBackdrop .sell-modal-actions > button {
    grid-column: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #sellModalBackdrop .sell-modal-grid input {
    min-width: 0 !important;
    width: 100% !important;
  }

  html.zenara-mobile-v2 body.zenara-mobile-v2.zenara-hostinger-shell
  #sellModalBackdrop .sell-summary strong {
    overflow-wrap: anywhere !important;
  }
}