/*
 * ADS performance layer.
 * Keeps the existing visual language while avoiding layout animation and
 * repeated real-time backdrop sampling on dense data and media surfaces.
 */

:root {
  --ads-performance-control-bg: rgba(255, 255, 255, 0.94);
  --ads-performance-popover-bg: rgba(250, 250, 252, 0.98);
  --ads-performance-modal-bg: rgba(250, 250, 252, 0.97);
  --ads-sidebar-expanded-width: 196px;
  --ads-sidebar-collapse-shift: 132px;
  --ads-sidebar-motion-duration: 180ms;
  --ads-sidebar-motion-easing: cubic-bezier(.23, 1, .32, 1);
}

@media (min-width: 761px) {
  .workspace,
  .topbar,
  .topbar-brand,
  .sidebar,
  .nav,
  .nav-children,
  .nav-group-button {
    transition: none !important;
  }

  .app-shell .sidebar {
    width: var(--ads-sidebar-expanded-width) !important;
    padding-inline: 0 !important;
    overflow: visible;
    isolation: isolate;
    contain: layout paint style;
    border-right: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
  }

  .app-shell .sidebar::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    border-right: 1px solid rgba(60, 60, 67, .14);
    background: rgb(248, 248, 250);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .72), 8px 0 24px rgba(15, 23, 42, .025);
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transform-origin: left center;
    transition: none;
  }

  .app-shell.sidebar-motion-ready .sidebar::before {
    will-change: transform;
    transition: transform var(--ads-sidebar-motion-duration) var(--ads-sidebar-motion-easing);
  }

  .app-shell.sidebar-collapsed .sidebar::before {
    transform: translate3d(calc(-1 * var(--ads-sidebar-collapse-shift)), 0, 0);
  }

  .app-shell .sidebar > .nav,
  .app-shell .sidebar > .sidebar-foot {
    position: relative;
    z-index: 1;
    width: var(--ads-sidebar-expanded-width);
    box-sizing: border-box;
    pointer-events: auto;
  }

  .app-shell .sidebar > .sidebar-foot {
    overflow: hidden;
  }

  .app-shell.sidebar-collapsed .sidebar > .nav,
  .app-shell.sidebar-collapsed .sidebar > .sidebar-foot {
    width: 64px;
  }

  .nav-child,
  .nav-standalone {
    transition:
      background-color 120ms ease-out,
      color 120ms ease-out,
      transform 100ms ease-out !important;
  }

  .nav-label,
  .sidebar-foot-label,
  .app-shell.sidebar-collapsed .nav-label,
  .app-shell.sidebar-collapsed .sidebar-foot-label {
    display: inline-block !important;
    overflow: hidden;
    white-space: nowrap;
    transition:
      opacity 120ms ease-out,
      transform 160ms cubic-bezier(.23, 1, .32, 1) !important;
  }

  .nav-label,
  .sidebar-foot-label {
    max-width: 142px;
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .app-shell.sidebar-collapsed .nav-label,
  .app-shell.sidebar-collapsed .sidebar-foot-label {
    max-width: 0;
    opacity: 0;
    transform: translate3d(-5px, 0, 0);
    pointer-events: none;
  }

  .ads-header-logo,
  .ads-header-symbol,
  .app-shell.sidebar-collapsed .ads-header-logo,
  .app-shell.sidebar-collapsed .ads-header-symbol {
    position: absolute;
    display: block !important;
    transition: none !important;
  }

  .ads-header-logo {
    opacity: 1;
    transform: translate3d(-2px, 0, 0) scale(1);
  }

  .ads-header-symbol {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 9px;
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.92);
    pointer-events: none;
    user-select: none;
  }

  .app-shell.sidebar-collapsed .ads-header-logo {
    opacity: 0;
    transform: translate3d(-2px, 0, 0) scale(.96);
    pointer-events: none;
  }

  .app-shell.sidebar-collapsed .ads-header-symbol {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .sidebar-toggle-icon {
    transition: transform var(--ads-sidebar-motion-duration) var(--ads-sidebar-motion-easing) !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  :root {
    --ads-sidebar-expanded-width: 184px;
    --ads-sidebar-collapse-shift: 120px;
  }
}

/* These three surfaces span most of the viewport. A nearly opaque version of
 * their existing tint looks the same but avoids recompositing the whole app
 * while the sidebar, a table or the page itself moves. */
.sidebar {
  background: rgb(248, 248, 250) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (min-width: 761px) {
  .app-shell .sidebar {
    background: transparent !important;
  }
}

.topbar {
  background: rgb(248, 249, 251) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#app-shell #view .pagination {
  background: rgb(246, 247, 250) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Sticky headers must stay fully opaque once live backdrop sampling is
 * disabled. Leaving the Apple material rgba values in place lets scrolling
 * row text show through the pinned header, especially in the blue metric
 * group. These solid colors are the same materials composited over white. */
#app-shell #view table thead th,
#modal-root table thead th,
.fixed-table-scroll thead th,
.user-account-head,
.workbench-store-header,
#app-shell #view .ad-data-report-table thead th.is-record-header.ad-data-accent-header {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#app-shell #view table thead th,
#modal-root table thead th,
.fixed-table-scroll thead th,
.user-account-head,
.workbench-store-header {
  background: rgb(251, 251, 252) !important;
}

#app-shell #view .ad-data-report-table thead th.is-record-header.ad-data-accent-header {
  background: rgb(224, 239, 255) !important;
  color: rgb(7, 95, 189) !important;
}

#app-shell #view .ad-data-report-table thead th[data-ad-column-key="reportBudgetValue"],
#app-shell #view .ad-data-report-table thead th[data-ad-column-key="reportCpmValue"] {
  background: linear-gradient(90deg, rgb(246, 249, 253), rgb(224, 239, 255) 16px) !important;
}

#app-shell #view .ad-data-report-table thead th[data-ad-column-key="reportConversionCostValue"],
#app-shell #view .ad-data-report-table thead th[data-ad-column-key="reportFrequencyValue"] {
  background: linear-gradient(90deg, rgb(224, 239, 255) calc(100% - 16px), rgb(246, 249, 253)) !important;
}

/* Controls retain their border, tint and shadow. Only the live background
 * sampling is removed, so their appearance remains effectively unchanged. */
#app-shell #view :is(.custom-select-trigger, .store-choice-trigger, .date-picker-trigger, .month-choice-control),
#app-shell #view .team-assignment-toolbar select,
#app-shell #view input[type="search"],
#app-shell #view .native-select-hidden,
#app-shell #view .pagination select,
#app-shell #view .pagination-jump input,
#app-shell #view .button.secondary,
#app-shell #view .table-actions .button:not(.primary):not(.danger),
#app-shell #view .store-choice-actions .button:not(.primary):not(.danger),
#app-shell #view .order-assignee-actions .button:not(.primary):not(.danger),
#app-shell #view :is(.ad-data-mode-switch, .store-data-mode-switch, .orders-report-switch, .automation-mode-switch),
#app-shell #view .apple-segmented-control,
#app-shell #view .ad-data-report-tabs-shell:has(.apple-scroll-tabs) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#app-shell #view :is(.custom-select-trigger, .store-choice-trigger, .date-picker-trigger, .month-choice-control),
#app-shell #view input[type="search"],
#app-shell #view .button.secondary,
#app-shell #view .pagination select,
#app-shell #view .pagination-jump input {
  background-color: var(--ads-performance-control-bg) !important;
}

.custom-select-menu,
.store-choice-popover,
.date-picker-popover,
.member-popover,
.order-assignee-popover,
.order-product-popover,
.creative-library-copy-popover {
  background: var(--ads-performance-popover-bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#modal-root .button.secondary,
#modal-root .native-select-hidden {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#modal-root .button.secondary {
  background: var(--ads-performance-control-bg) !important;
}

body.has-open-modal .modal-backdrop {
  background: rgba(15, 23, 42, 0.36) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Only the creative preview receives the lighter modal surface. Other modal
 * designs keep their existing material and spacing. */
.modal.creative-detail-modal {
  background: var(--ads-performance-modal-bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  contain: layout paint style;
}

.creative-library-card {
  content-visibility: auto;
  contain: layout paint style;
  contain-intrinsic-block-size: 560px;
}

.creative-library-kind,
.creative-library-play {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.creative-library-kind {
  background: rgba(15, 18, 24, 0.66) !important;
}

.creative-library-play {
  background: rgba(15, 18, 24, 0.64) !important;
}

.creative-ad-detail-preview,
.creative-ad-detail-insights {
  contain: layout paint style;
}

.creative-ad-detail-insights {
  overscroll-behavior: contain;
}

.creative-insight-section {
  content-visibility: auto;
  contain: layout paint style;
  contain-intrinsic-block-size: 150px;
}

body.creative-preview-open #view .creative-library-card,
body.creative-preview-open #view .creative-library-media {
  animation-play-state: paused !important;
}

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

  .creative-library-media,
  .sidebar,
  .workspace,
  .topbar,
  .topbar-brand,
  .sidebar-toggle-icon {
    transition: none !important;
  }

  .app-shell.sidebar-motion-ready .sidebar::before {
    will-change: auto;
  }

  .app-shell .sidebar::before,
  .nav-label,
  .sidebar-foot-label,
  .ads-header-logo,
  .ads-header-symbol {
    transition: none !important;
  }
}