/* Global UI foundation: the final shared visual and interaction layer. */
:root{
  --ui-space-1:4px;
  --ui-space-2:8px;
  --ui-space-3:14px;
  --ui-space-4:20px;
  --ui-radius-small:14px;
  --ui-radius-content:18px;
  --ui-radius-control:24px;
  --ui-motion-fast:120ms;
  --ui-motion-normal:180ms;
  --ui-motion-sheet:260ms;
  --ui-ease:cubic-bezier(.2,.8,.2,1);
  --ui-control-fill:rgba(255,255,255,.76);
  --ui-control-border:rgba(255,255,255,.68);
  --ui-control-shadow:0 10px 26px rgba(78,128,157,.10),inset 0 1px 0 rgba(255,255,255,.92);
  --ui-content-fill:rgba(249,252,253,.72);
  --ui-content-border:rgba(207,222,229,.52);
  --ui-content-shadow:0 10px 26px rgba(78,110,132,.055),inset 0 1px 0 rgba(255,255,255,.78);
  --ui-hero-fill:linear-gradient(135deg,#62b8eb 0%,#48c7d2 50%,#5abf96 100%);
  --ui-hero-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 18px 34px rgba(49,142,176,.18);
  --ui-disabled-opacity:.34;
  --ui-nav-height:94px;
}

.ui-surface-control{
  border:1px solid var(--ui-control-border);
  border-radius:var(--ui-radius-control);
  background:var(--ui-control-fill);
  box-shadow:var(--ui-control-shadow);
  backdrop-filter:blur(24px) saturate(130%);
  -webkit-backdrop-filter:blur(24px) saturate(130%);
}

.ui-surface-content{
  border:1px solid var(--ui-content-border);
  border-radius:var(--ui-radius-content);
  background:var(--ui-content-fill);
  box-shadow:var(--ui-content-shadow);
}

.ui-surface-hero{
  color:#fff;
  border:1px solid rgba(255,255,255,.36);
  border-radius:var(--ui-radius-control);
  background:var(--ui-hero-fill);
  box-shadow:var(--ui-hero-shadow);
}

.is-busy,
[aria-busy="true"]{
  cursor:wait!important;
}

.is-disabled,
:disabled{
  opacity:var(--ui-disabled-opacity);
  pointer-events:none;
}

.admin-main,
.shopper-stack{
  display:grid;
  gap:var(--ui-space-3)!important;
}

.admin-main{
  padding-bottom:calc(var(--ui-nav-height) + env(safe-area-inset-bottom) + var(--ui-space-4))!important;
}

.shopper-shell{
  padding-bottom:calc(var(--ui-nav-height) + env(safe-area-inset-bottom) + var(--ui-space-4))!important;
}

.admin-topbar,
.topbar,
.bottom-nav{
  border-radius:var(--ui-radius-control)!important;
  border-color:var(--ui-control-border)!important;
  background:var(--ui-control-fill)!important;
  box-shadow:var(--ui-control-shadow)!important;
}

/* Shared summary cards */
.admin-shell .admin-hero,
.admin-shell .trend-summary-strip,
.admin-shell .admin-hero--achievement{
  min-height:126px!important;
  margin:0!important;
  padding:17px 18px 15px!important;
  overflow:hidden;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.36)!important;
  border-radius:var(--ui-radius-control)!important;
  background:var(--ui-hero-fill)!important;
  box-shadow:var(--ui-hero-shadow)!important;
}

.admin-shell .admin-hero__content{
  min-height:94px!important;
  padding:0!important;
}

.admin-shell .admin-hero__head,
.admin-shell .trend-summary-strip__head{
  gap:var(--ui-space-2)!important;
}

.admin-shell .admin-hero__share,
.admin-shell .trend-summary-strip b{
  font-size:36px!important;
  line-height:.95!important;
}

.admin-shell .admin-hero__grid,
.admin-shell .trend-summary-strip__grid{
  margin-top:13px!important;
  padding-top:11px!important;
}

/* Shared control groups */
.admin-shell .today-date-card,
.admin-shell .trend-filter-card{
  margin:0!important;
  gap:var(--ui-space-2)!important;
}

.admin-shell .today-date-card button,
.admin-shell .trend-range-control > button,
.admin-shell .trend-filter-select,
.shopper-date-panel,
.shopper-segmented,
.text-field,
.apply-button,
.solid-button,
.outline-button,
.button-secondary,
.button-danger{
  min-height:48px;
}

.admin-shell .today-date-card__step,
.admin-shell .trend-range-step{
  width:48px!important;
  height:48px!important;
  border-radius:50%!important;
  border-color:var(--ui-control-border)!important;
  background:var(--ui-control-fill)!important;
  box-shadow:var(--ui-control-shadow)!important;
}

.admin-shell .today-date-card__value,
.admin-shell .trend-range-card,
.admin-shell .trend-filter-select,
.shopper-date-panel,
.shopper-segmented{
  border:1px solid var(--ui-control-border)!important;
  border-radius:var(--ui-radius-control)!important;
  background:var(--ui-control-fill)!important;
  box-shadow:var(--ui-control-shadow)!important;
}

/* Shared content surfaces */
.admin-shell .list,
.admin-shell .panel,
.admin-shell .action-card,
.admin-shell .trend-list,
.shopper-editor,
.shopper-history-card,
.shopper-report-card,
.shopper-sheet .content-card{
  margin:0!important;
  border:1px solid var(--ui-content-border)!important;
  border-radius:var(--ui-radius-content)!important;
  background:var(--ui-content-fill)!important;
  box-shadow:var(--ui-content-shadow)!important;
}

.admin-shell .list-row{
  min-height:64px;
  padding:11px 14px!important;
  border-bottom-color:var(--ui-content-border)!important;
}

.shopper-editor,
.admin-shell .panel,
.admin-shell .action-card{
  padding:var(--ui-space-3)!important;
}

.text-field{
  border-radius:var(--ui-radius-small)!important;
}

.apply-button,
.solid-button,
.outline-button,
.button-secondary,
.button-danger{
  border-radius:999px!important;
}

.shopper-hero{
  border-radius:var(--ui-radius-control)!important;
  box-shadow:var(--ui-hero-shadow)!important;
}

.is-busy{
  position:relative;
  filter:saturate(.82);
}

.admin-main.is-updating,
.shopper-main.is-updating{
  opacity:1;
  pointer-events:none;
  cursor:progress;
  transition:none;
}

.toast[data-tone="success"]{
  color:#236f4b!important;
  border-color:rgba(64,166,111,.24)!important;
}

.toast[data-tone="error"]{
  color:#a63d48!important;
  border-color:rgba(199,75,88,.24)!important;
}

.empty,
.ui-empty-state{
  min-height:96px;
  display:grid;
  place-items:center;
  padding:var(--ui-space-4);
  color:var(--ink-soft,var(--ink-muted,#667985));
  text-align:center;
  border:1px solid var(--ui-content-border);
  border-radius:var(--ui-radius-content);
  background:var(--ui-content-fill);
  box-shadow:var(--ui-content-shadow);
}

button,
[role="button"],
.today-date-card__value,
.trend-filter-select,
.shopper-date-panel{
  transition:transform var(--ui-motion-fast) ease,opacity var(--ui-motion-normal) ease,color var(--ui-motion-normal) ease,background-color var(--ui-motion-normal) ease,box-shadow var(--ui-motion-normal) ease!important;
}

button:active:not(:disabled),
[role="button"]:active{
  transform:scale(.975);
}

.bottom-nav__indicator,
.segmented__indicator{
  transition:transform var(--ui-motion-normal) var(--ui-ease),width var(--ui-motion-normal) var(--ui-ease)!important;
}

.toast{
  transition:opacity var(--ui-motion-normal) ease,transform var(--ui-motion-normal) var(--ui-ease)!important;
}

.sheet-backdrop.is-open{
  animation:uiFoundationBackdropIn var(--ui-motion-normal) ease-out both!important;
}

.bottom-sheet.is-open{
  animation:uiFoundationSheetIn var(--ui-motion-sheet) var(--ui-ease) both!important;
}

@keyframes uiFoundationBackdropIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes uiFoundationSheetIn{
  from{opacity:.98;transform:translate(-50%,calc(100% + 14px))}
  to{opacity:1;transform:translate(-50%,0)}
}

@media (prefers-reduced-motion:reduce){
  :root{
    --ui-motion-fast:1ms;
    --ui-motion-normal:1ms;
    --ui-motion-sheet:1ms;
  }

  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:1ms!important;
    animation-iteration-count:1!important;
    transition-duration:1ms!important;
  }

  button:active:not(:disabled),
  [role="button"]:active{
    transform:none!important;
  }
}